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，上传保存即可。

转载于:https://www.cnblogs.com/w2xh/p/5056228.html