图片上传前端压缩过大的图片办法

今天遇到了个需求，要求能在图片上传的时候在网页上显示图片，这里我用的方法是先将网页上传的file通过FileReader对象读取出来，然后将这个对象读取成为base64的编码赋值到img标签的src里面就行了。

后来在图片上传的时候又希望前端这边可以进行图片的压缩，这里使用的办法是使用canvas画布，画出图片，然后再进行收缩，收缩后的canvas再转换为file文件，最后用这个file文件进行上传。

主要的一些代码如下：

let [reader, img] = [new FileReader(), new Image()]
// 读取出file为base64编码：
reader.readAsDataURL(file)
// 使用回调函数，在图片被读取完的时候进行操作
reader.onload = function() {
    // 给img对象的src赋值
    img.src = reader.result
}

// img对象图片加载完毕的回调
img.onload = function(){
    // 图片加载完成的操作
    let [originWidth,originHeight,maxWidth,maxHeight] = [this.width, this.height, 1000, 1000]
    let canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        [targetWidth, targetHeight] = [originWidth, originHeight]

    // 图片尺寸超过1000x1000的限制
    if (originWidth > maxWidth || originHeight > maxHeight) {
        if (originWidth / originHeight > maxWidth / maxHeight) {
            // 更宽，按照宽度限定尺寸
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
        } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
        }
    }
        
    // canvas对图片进行缩放
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    // 清除画布
    context.clearRect(0, 0, targetWidth, targetHeight);
    // 图片压缩
    context.drawImage(this, 0, 0, targetWidth,targetHeight);
}