本篇文章参考以下博文
前言
最近在做项目的时候,遇到一个图片压缩的问题,正常来讲,前端以 http 地址的方式进行图片的获取是不需要压缩的,浏览器内存不会占用过高,但是手里的那个项目图片获取的是实况截图,没有配置存储,后台直接给发送的 base64 格式。一开始的时候没什么问题,但是当图片质量提升到 4k 时,内存溢出了,浏览器也经常出现崩溃挂死的现象。
后面仔细追踪了一下,后台发送过来的 base64 字符创长度有 260万 ,没看错,带个万,由于界面需要一直展示图片,所以这 260万 的字符串一直没释放掉。导致了后面的内存问题。
本篇博文记一下前端压缩 base64 的方法,以供后面复习。
压缩方法
该压缩方法借鉴了其他博客,最上面有跳转连接。
//压缩方法
function dealImage(base64, w, callback) {
var newImage = new Image();
var quality = 0.6; //压缩系数0-1之间
newImage.src = base64;
newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要
var imgWidth, imgHeight;
newImage.onload = function () {
imgWidth = this.width;
imgHeight = this.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = w * imgHeight / imgWidth;
} else {
canvas.height = w;
canvas.width = w * imgWidth / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
quality = 0.6;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间,请加以下语句,quality初始值根据情况自定
// while (base64.length / 1024 > 150) {
// quality -= 0.01;
// base64 = canvas.toDataURL("image/jpeg", quality);
// }
// 防止最后一次压缩低于最低尺寸,只要quality递减合理,无需考虑
// while (base64.length / 1024 < 50) {
// quality += 0.001;
// base64 = canvas.toDataURL("image/jpeg", quality);
// }
callback(base64);//必须通过回调函数返回,否则无法及时拿到该值
}
}
//使用压缩
dealImage(oldBase64, 1400, (newBase64) => {
console.log("压缩后", newBase64.length / 1024)
});
该方法属于比较简单粗暴的,先是创建一个 Image 对象,然后把 Image 对象的地址指向需要压缩的 base64 上,再通过 canvas ,把图片绘制出来,设置好压缩后的像素,使用 canvas.toDataURL 完成最后压缩。
canvas.toDataURL()
语法
canvas.toDataURL(type, encoderOptions);
参数
- type 可选
图片格式,默认为 image/png - encoderOptions 可选
在指定图片格式为 image/jpeg 或 image/webp 的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。
最后通过上面的压缩, 260万 的字符串可以压缩到 13万 ,再往低压缩,图片看起来就有点模糊了,上面压缩方法中的 1400 是我根据图片展示的大小,设置的,举个例子,浏览器分辨率是 1920px 的,在这个分辨率下全屏浏览器,图片展示占用大概 1400 个像素,那我设置成 1400 就代表,当图片像素超过 1400 的时候,就按照 1400 的大小压缩,当不足 1400 的时候,按照实际图片压缩。