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

用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;