基于画布canvas进行图片压缩

Canvas 压缩图片的原理主要是通过重新绘制图片，调整图片质量或大小来达到压缩图片的目的。

具体实现步骤如下：

 1. 使用 JavaScript 中的 Image 对象将图片加载到内存中

var img = new Image();
img.src = 'image.png';

 2. 创建一个 Canvas 对象，并使用 Canvas 对象的 drawImage() 方法在画布上绘制图片

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);

 3. 调整质量参数或缩放图片大小(重点)

// 调整质量参数
ctx.drawImage(img, 0, 0, img.width * 0.5, img.height * 0.5); // 降低0.5倍质量

// 缩放图片大小
ctx.drawImage(img, 0, 0, 200, 200); // 重新调整图片大小为 200px x 200px

 4. 将 Canvas 对象转换为图片或 Base64 编码的字符串

// 将 Canvas 对象转换为图片
var compressedImg = new Image();
compressedImg.src = canvas.toDataURL('image/jpeg', 0.5); // 转换为 JPG 格式，并且压缩质量为 0.5

// 将 Canvas 对象转换为 Base64 编码的字符串
var dataUrl = canvas.toDataURL('image/jpeg', 0.5);

上述步骤中，使用 Canvas 对象重新绘制图片时，可以通过绘制时调整大小或调整质量参数来压缩图片。通过调整 Canvas 对象的 toDataURL() 方法的参数，可以将 Canvas 对象转换成图片或 Base64 编码的字符串，达到图片压缩的效果。

完整代码如下：

function dealImage (path, size, quality = 0.5, zipQuality = 0.3, callback) => {
	var img = new Image();
	img.src = path;
	quality = Number(quality);
	img.onload = function() {
		// 默认按比例压缩
		var w = this.width,
			h = this.height,
		w = size.width || w;
		h = size.height || h;
		//生成canvas
		var canvas = document.createElement('canvas');
		// 创建属性节点
		var anw = document.createAttribute("width");
		anw.nodeValue = w;
		var anh = document.createAttribute("height");
		anh.nodeValue = h;
		canvas.setAttributeNode(anw);
		canvas.setAttributeNode(anh);
		var ctx = canvas.getContext('2d');
		//设置背景
		ctx.fillStyle = "#fff";
		ctx.fillRect(0, 0, canvas.width, canvas.height);
		ctx.drawImage(this, 0, 0, w, h);
		
		// quality值越小，所绘制出的图像越模糊
		// 回调函数返回base64的值
		callback(canvas.toDataURL('image/jpeg', quality));
	}
}

参考链接: 基于画布canvas进行图片压缩 – 萌新小试(www.sunn.asia)