js canvas压缩图片上传

时间:2021-10-17 08:22:31
$('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,上传保存即可。