layui在上传图片在前端处理图片压缩

有的人会遇到需要在前端代码处理图片压缩的问题，下面给大家分享怎么处理。

// 上传图片

var image_src

var IsImgDeal=false;

layui.upload.render({

    elem: "#{tag}{id}",

    url: sessionStorage.getItem('httpUrlPrefix') + '/upload/uploadImage',

    // dataType: 'text',

    // auto: false,

    // multiple: true,

    accept:"images",

    exts: 'jpg|png|jpeg',

    acceptMime:"image/jpeg,image/png",

    before: function (obj) {

        layer.msg("图片上传中...", { icon: 16, shade: 0.01 })

    },

    done: function(res){

         layer.msg(`<div style="display:flex;"><div class="tipsSuccess"></div>

                                               <div class="titleTips">提示

                                               </div>

                                             </div>

                                             <div class="context" ><br>上传成功！</div>`

            , {

                skin: 'success-class',

                time: 1000

            });

             layer.closeAll('loading'); //关闭loading

        console.log("sfafasfa",JSON.stringify(res))

        image_src = res.url

        IsImgDeal = false;

    },

    choose: function (obj) {

        obj.preview(function (index, file, result) {

            console.log("================>",file)

            let filename = file.name

            // console.log("================>",result)

            //临时存储二进制流

            $("#uploadnewImg-{id}").hide()

            $("#uploadexistimg-{id}").show()

            $("#uploadImg-{id}").attr("src", result);

        });

if (IsImgDeal) {

                        return;//图片处理过就直接上传

                    }

                    console.log("图片压缩开始处理");

                    var files = obj.pushFile();

                    var file_tar = null,index_tar = null;

                    for (var k in files) {

                        index_tar = k;

                        file_tar = files[k];

                        break;

                    }

                    

                    

                    //进行图片压缩，直接百度压缩方法

                    let reader = new FileReader();

                    var filename = file_tar.name;

                    

                    reader.readAsDataURL(file_tar);

                    

                    reader.onload = function () {

                        

                        let content = this.result; //图片的src，base64格式

                        let img = new Image();

                        img.src = content;

                        img.onload = function () { //图片加载完毕

                            

                            let canvas = document.createElement("canvas");

                            let ctx = canvas.getContext('2d');

                            

                            let width = Math.ceil(img.width*0.8);

                            let height = Math.ceil(img.height*0.8);

                            canvas.width = width;

                            canvas.height = height;

                            ctx.drawImage(img, 0, 0, width, height);//压缩图片尺寸

                            let dataURL = canvas.toDataURL("image/jpeg");//如果是需要质量压缩就补充参数

                            //将base64数据转化为文件对象

                            var arr = dataURL.split(','), mime = arr[0].match(/:(.*?);/)[1],

                                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

                            while (n--) {

                                u8arr[n] = bstr.charCodeAt(n);

                            }

                            IsImgDeal = true;//设置标记

                            //如果有时差问题，后面setTimeout延时再执行，让原来的上传终止

                            obj.upload(index_tar, new File([new Blob([u8arr], { type: mime })], filename));//单独上传

                            

                            //uploadIns.upload();//重新启动全部文件上传

                        }

                    };

                   layer.load(); //上传loading

                    //停止原本的上传，如果多个文件，需要在读取完毕后将files里面的文件队列全删除。

                    return delete files[index_tar];

        

    },

});