js压缩图片

后台处理图片的话比较方便，但是由于可以多张图片上传，文件太大的话会影响传输速度，所以选择前台处理咯

参考了一些网友的分享，总结了一下，以下代码可以直接拿来用

关键代码：

	function fileResizetoFile(file,quality,fn){
	  filetoDataURL (file,function(dataurl){
		dataURLtoImage(dataurl,function(image){
		  canvasResizetoFile(imagetoCanvas(image),quality,fn);
		})
	  })
	}
	function filetoDataURL(file,fn){
	  var reader = new FileReader();
	  reader.onloadend = function(e){
		fn(e.target.result);
	  };
	  reader.readAsDataURL(file);
	};
	function dataURLtoImage(dataurl,fn){
	  var img = new Image();
	  img.onload = function() {
		fn(img);
	  };
	  img.src = dataurl;
	};
	function canvasResizetoFile(canvas,quality,fn){
	  canvas.toBlob(function(blob) {
		fn(blob);
	  },'image/jpeg',quality);
	};
	function imagetoCanvas(image){
	  var cvs = document.createElement("canvas");
	  var ctx = cvs.getContext('2d');
	  cvs.width = image.width;
	  cvs.height = image.height;
	  ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
	  return cvs ;
	};
	//上面是图片的处理  下面就是调用了
	//因为我用的bootstrap的插件dropzone.js 所以是在它的添加文件的监听事件上处理的
	this.on("addedfile",function(file){//添加一个文件时的监听事件  在这里进行文件压缩
		//调用上面的方法
		fileResizetoFile(file,0.1,function(res){//第二个参数范围是 0~1 用于调整图片质量
			newfile.push(res);//这个newfile是我其他代码里定义的一个数组 把压缩的图片Blob一个个放进去
		})
	});

如果有在dropzone.js插件上压缩图片的朋友不太会的话，可以联系我

建议点这里先看看相关文档