前端实现图片压缩（转base64）

 本文介绍的图片压缩方法适用前端开发的同学，

主要流程：图片转base64——canvas重绘——实现压缩。 

一、图片转为base64

网上有现成的工具，我们把图片放进去，就会得到相应的base64编码，此编码的长度就是图片的大小，转换成KB要除以1024，如想预览base64图片，只需将img标签的src属性设置为该base64编码即可。

注意：用var oldSize = base64.length/1024来表示图片的大小，会比图片实际尺寸大1/4，即oldSize*3/4后才是图片的实际尺寸（略有误差）。

 

转base64工具网址为：http://imgbase64.duoshitong.com/             （如失效请自己查找，工具非常多）

二、canvas压缩

                //压缩方法
		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, 800, printing);
		function printing(base64) {
			console.log("压缩后", base64.length / 1024)
		}

注意：压缩系数quality在0.995-1之间，压缩会出现异常，压缩后尺寸比原图还大，所以要避免取这些值。