js canvas压缩图片上传

$('input[type="file"]').on('change',function(){
var files = !!this.files ? this.files : [];

// Create a new instance of the FileReader
var reader = new FileReader();

// Read the local file as a DataURL
reader.readAsDataURL(files[0]);

var blob = window.URL.createObjectURL(files[0]);//转换为二进制blob文件
var img=new Image();
img.src=blob;
img.onload = function(){
var cvs = document.createElement('canvas');
var ctx = cvs.getContext("2d");
cvs.width=img.width*.2;
cvs.height=img.height*.2;
ctx.drawImage(this, 0, 0,img.width*.2,img.height*.2);
var newImageData = cvs.toDataURL('image/jpg',1);

//input file不能用于上传base64，所以要再加一个input，同时把当前file的input赋值空，防止原图片也上传
this.value="";
$(this).next('input[type="hidden"]').val(newImageData);
}
// When loaded, set image data as background of div
reader.onloadend = function(){
$('#img').attr('src',this.result);//缩略图
}
})

　　其中的newImageData即为新生成的压缩后的图片base64，上传保存即可。