用react实现FileReader结合canvas在前端实现压缩图片并在线预览

最新推荐文章于 2024-04-28 18:18:11 发布

原创

最新推荐文章于 2024-04-28 18:18:11 发布 · 2.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#FileReader #canvas #在线预览 #压缩图片

本文介绍了如何利用react、FileReader和canvas在前端实现图片压缩及在线预览。通过canvas的drawImage方法将图片绘制到指定大小的画布上，然后将画布转换为base64格式，实现图片的压缩。内容涵盖了单图和多图的压缩处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用react实现FileReader结合canvas在前端实现压缩图片并在线预览

图片的压缩主要是采用canvas的drawImage方法将原本大小的画布压缩到指定大小的画布中，再通过toDataURL将画布转化为base64格式信息图像
以下主要实践了，单图和多图的压缩；

import React, {
   
    Component } from 'react';
import './Total.scss'

class Imageouput extends Component {
   
   
    constructor(props) {
   
   
        super(props);
        this.state = {
   
   
            imgSrc: '',
            imgSize:'',
            imgSize1:'',
            imgList:[],
            showimg:false
        }
    }

    addImagesFile() {
   
   
        let that=this;
        let imgFile = document.getElementById('images').files[0];
        let form = new FormData();
        form.append('file', imgFile);

        var imageEle=document.getElementById("images");
        let fileList = imageEle.files;
        var imagSize =  document.getElementById("images").files[0].size;
        this.setState({
   
   
            imgSize:(imagSize/1024/1024).toFixed(2)
        });
        let imageDataReader = new FileReader();
        imageDataReader.readAsDataURL(imgFile);
        imageDataReader.onload = function(){
   
   
            let imgValue=this.result;
            that.setState({
   
   
                imgSrc:imgValue
            });
            if(imagSize>1024*1024*2){
   
   
                var img = new Image();
                img.src = imgValue;
                img.onload = function(){
   
   
                    var these = this;