2024-11-14 canvas实现base64图片压缩

我们将图片传给后台的时候，如果图片较大，接口请求时间会变长，也会占用很多空间，如果对图片和的清晰度要求不是很高，可以进行适当压缩。

压缩方法

/**
 * 图片压缩
 * @param base64 原始base64值
 * @param w 宽度
 */
export function dealImage(base64, w) {
    return new Promise((resolve) => {
        let img = new Image();
        let quality = 0.9; // 提高压缩质量  
        img.src = base64;
        img.setAttribute("crossOrigin", 'Anonymous');
        let imgWidth, imgHeight;
        img.onload = function () {
            imgWidth = this.width;
            imgHeight = this.height;
            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext("2d");
            let scaleFactor = Math.min(w / imgWidth, w / imgHeight); // 计算缩放比例  
            canvas.width = imgWidth * scaleFactor;
            canvas.height = imgHeight * scaleFactor;
            ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
            // 根据需要选择输出格式  
            let resBase64 = canvas.toDataURL("image/png", 1); // 使用 PNG 格式  
            canvas.remove() //清除canvas
            resolve(resBase64);
        };
    });
}

该方法中需要注意的几个点：

• 文件类型检查：在读取文件之前，务必检查文件类型是否为图片，以避免非图片文件导致的错误。
• 跨域问题：如果图片来自外域，需要设置crossOrigin属性为Anonymous，否则可能会因为跨域问题导致图片加载失败
• 返回值，将其封装为一个promise对象，直接以函数return返回值的形式不能及时获取到处理后的base64，也可以用回调函数的形式，不过没有promise的方式优雅
• 压缩率，在清晰度方面可以调整压缩系数、宽高的临界值、最后输出的图片格式这几个参数
• 在最终的图片操作时，看传输的base64需不需要前缀，具体分析