js图片img转base64数据流并压缩处理

js转化本地或者线上图片，转base64数据流并压缩处理。

es5-回调处理：

// 参数说明：图片地址（本地或者线上url）、处理后返回的base64内容、指定图片类型
function imgToBase64(url, callback, outputFormat) {
	var canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');
	var img = new Image;
	img.crossOrigin = 'Anonymous';
	img.onload = function() {
		var width = img.width;
		var height = img.height;
		
		// 压缩比例 -- 可以自己修改参数。500px宽度以下原尺寸，大于500px比例处理
		var bili = Math.round(width / 500) || 1;
		var rate = 1 / bili;
		canvas.width = width * rate;
		canvas.height = height * rate;
		ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
		var dataURL = canvas.toDataURL(outputFormat || 'image/jpeg');
		// 去除标头 -- 传递给后台时一般去除头部
		// var reg = new RegExp('^data:image/[^;]+;base64,');
		// dataURL = dataURL.replace(reg, '');
		callback.call(this, dataURL);
		canvas = null;
	}
	img.src = url;
};

// 调用：
imgToBase64("https://img0.bdstatic.com/static/searchdetail/img/logo-2X_2dd9a28.png", function(res){
	console.log(res)
});

es6-Promise处理：

// 参数说明：图片地址（本地或者线上url）、处理后返回的base64内容、指定图片类型
function imgToBase64(url, outputFormat) {
	return new Promise((resolve, reject) => {
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		var img = new Image;
		img.crossOrigin = 'Anonymous';
		img.onload = () => {
			var width = img.width;
			var height = img.height;
			
			// 压缩比例 -- 可以自己修改参数。500px宽度以下原尺寸，大于500px比例处理
			var bili = Math.round(width / 500) || 1;
			var rate = 1 / bili;
			canvas.width = width * rate;
			canvas.height = height * rate;
			ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
			var dataURL = canvas.toDataURL(outputFormat || 'image/jpeg');
			// 去除标头 -- 传递给后台时一般去除头部
			// var reg = new RegExp('^data:image/[^;]+;base64,');
			// dataURL = dataURL.replace(reg, '');
			canvas = null;
			resolve(dataURL);
		}
		img.src = url;
	})
};

// 调用：
imgToBase64("https://img0.bdstatic.com/static/searchdetail/img/logo-2X_2dd9a28.png").then(res => console.log(res))

---

备注： 如果是前端自己用，不需要过滤base64的头部字符。往后端传递base64数据流时，一般会删去头部标志。es5 或es6 大同小异，喜欢哪个用哪个