前端配合 layui 原生压缩图片

最近在写图片压缩功能，便在网上找了资料，发现并没有整合 layui，便研究了下

需要了解以下知识：

充分了解三个状态：choose，before，done。

choose：表示文件选择后的回调，注意此时并没有加入上传队列；

before：表示文件上传前的回调，注意此时已经加入上传队列；

done：表示文件上传成功的回调；

重点：要使用 choose，必须设置为 auto为 false

前端压缩代码 JS：

//压缩图片
compressImage = (file, success, error) => {
    // 图片小于1M不压缩
    if (file.size < Math.pow(1024, 2)) {
        return success(file);
    }

    const name = file.name; //文件名
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) => {
        const src = e.target.result;

        const img = new Image();
        img.src = src;
        img.onload = (e) => {
            const w = img.width;
            const h = img.height;
            const quality = 0.8;  // 默认图片质量为0.92
            //生成canvas
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            // 创建属性节点
            const anw = document.createAttribute("width");
            anw.nodeValue = w;
            const anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);

            //铺底色 PNG转JPEG时透明区域会变黑色
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, w, h);

            ctx.drawImage(img, 0, 0, w, h);
            // quality值越小，所绘制出的图像越模糊
            const base64 = canvas.toDataURL('image/jpeg', quality); //图片格式jpeg或webp可以选0-1质量区间

            // 返回base64转blob的值
            console.log(`原图${(src.length/1024).toFixed(2)}kb`, `新图${(base64.length/1024).toFixed(2)}kb`);
            //去掉url的头，并转换为byte
            const bytes = window.atob(base64.split(',')[1]);
            //处理异常,将ascii码小于0的转换为大于0
            const ab = new ArrayBuffer(bytes.length);
            const ia = new Uint8Array(ab);
            for (let i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
            file = new Blob( [ab] , {type : 'image/jpeg'});
            file.name = name;
            file.compressImage = true;

            success(file);
        },
        img.onerror = (e) => {
            error(e);
        }
    },
    reader.onerror = (e) => {
        error(e);
    }
}

Layui 图片上传：

upload.render({
    elem: '#upload_img_list_button' //绑定元素
    ,url: '/upload-image' //上传接口
    ,accept:"images"
    ,acceptMime: "image/*"
    ,multiple: true
    ,field: 'my_image'
    ,auto: false
    // ,size: 2048  // 限制图片2M
    ,choose: function(obj) {
        obj.preview(function(index, file, result){
            compressImage(file, (file)=>{
                obj.upload(index, file);//文件上传
            });
        });
    }
    ,done: function(res){

        //上传完毕回调
        if (res.code == 200) {

        } else {
            layer.msg(res.message);
        }
    }
    ,error: function(){
        layer.msg('系统错误，请联系管理员');
    }
    });