前端压缩--Base64图片压缩原理

本篇文章参考以下博文

• 前端实现图片压缩（转base64）
• HTMLCanvasElement.toDataURL()
  

前言

  最近在做项目的时候，遇到一个图片压缩的问题，正常来讲，前端以 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 的时候，按照实际图片压缩。