html base64图片压缩

个人用于微信小程序中html的图片压缩展示与上传

export function dealImage(base64, min, max, callback) {

    var newImage = new Image();

    newImage.src = base64;

    // newImage.setAttribute("crossOrigin", 'Anonymous');  //url为外域时需要

    newImage.onload = function () {

        var imgWidth = this.width;

        var imgHeight = this.height;

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

        var quality = 0.6;    //压缩系数0-1之间

        canvas.width = imgWidth*quality;

        canvas.height = imgHeight*quality;

        var ctx = canvas.getContext("2d");

        ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);

        let result = canvas.toDataURL("image/jpeg", quality); //压缩语句

        // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定

        while (result.length / 1024 > max) {

            quality -= 0.01;

            result = canvas.toDataURL("image/jpeg", quality);

        }

        // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑

        while (result.length / 1024 < min) {

            quality += 0.01;

            result = canvas.toDataURL("image/jpeg", quality);

        }

        callback(result);//必须通过回调函数返回，否则无法及时拿到该值

    }

}

在PC上调试完全没有问题，挪到手机上就各种问题，，，安卓反应有卡顿，而我的iphone6就直接卡死了。。。中间还有过改成file格式上传，但是数据各种嵌套，使用formdata传数据，不会写。。无奈还是要选base64传输。。。

优化部分主要是画布大小，ctx.drawImage方法中的大小要与画布保持一致，否则图片有裁剪

另外调整压缩后大小的while中的quality计算可以根据需求调整计算幅度