原生js进行图片压缩

/*
	path: 图片路径
	obj: 压缩参数
	callback: 回调函数
*/
function dealimg(path, obj, callback) {
	var img = new Image();
	img.src = path;
	img.onload = function () {
		var that = this;
		var w = that.width,
			h = that.height,
			scale = w / h;
		w = obj.width || w;
		h = obj.height || (w / scale);
		var quality = 0.7; // 图片质量压缩比例
		//在画布中重新绘制图片达到压缩效果
		//但如果质量和长宽不变，重新绘制的图片会比原来的大
		//质量压缩对大小影响不大，主要是长宽压缩
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		// 创建属性节点
		let anw = document.createAttribute('width');
		anw.nodeValue =w;
		let anh = document.createAttribute('height');
		anh.nodeValue = h;
		canvas.setAttributeNode(anw);
		canvas.setAttributeNode(anh);
		ctx.drawImage(that,0,0,w,h);
		//图像质量
		if(obj.quality && obj.quality <= 1 && obj.quality > 0 ){
			quality = obj.quality;
		}
		//压缩为base64格式，第一个参数还可为"image/jpg"等
		var base64 = canvas.toDataURL("image/png", quality);
		callback(base64);
	}
}
dealimg('1.jpg', {width:200}, function (base) {
	//把压缩后的图片显示出来
	document.getElementById('transform').src = base;
})

//一些上传图片插件回调的内容中没有url，需要根据回调的file对象自己去获取
//可以使用下面的方法
//获取url
function getObjectURL(file) {
	var url = null;
	if(window.createObjectURL!=undefined) {  // basic
		url = window.createObjectURL(file) ;
	} else if (window.URL!=undefined) {       // mozilla(firefox)
		url = window.URL.createObjectURL(file) ;
	} else if (window.webkitURL!=undefined) { // web_kit or chrome
		url = window.webkitURL.createObjectURL(file) ;
	}
	return url;
}

//虽然上面的方法可向后端传递base64数据，但有时后端需要File格式的数据
//可用下面函数把base64转为file（blob？）对象
function base64ToBlob(base64){
	var arr = base64.split(',');
	var mime = arr[0].match(/:(.*?);/)[1] || fType;
	// 去掉url的头，并转化为byte
	var bytes = window.atob(arr[1]);
	// 处理异常,将ascii码小于0的转换为大于0
	var ab = new ArrayBuffer(bytes.length);
	// 生成视图（直接针对内存）：8位无符号整数，长度1个字节
	var ia = new Uint8Array(ab);
	for (var i = 0; i < bytes.length; i++) {
		ia[i] = bytes.charCodeAt(i);
	}
	//blob对象
	var blobObj = new Blob([ab], {
		type: mime
	});
	//放入form对象中，可以传到后台
	var form = new FormData();
	//第三个参数为自定义的文件名，如果不传后端得到的文件名是'blob'，会有问题
	form.append("file", blobObj, '1.jpg');
}