js实现图片压缩上传

原理：利用canvas的drawImage()方法绘制图像。
调用canvas的toBlob()方法获取图片的二进制数据传给后端。
drawImage(image,dx,dy,dWidth,dHeight);
参数详情：
image:图片 ；（dx,dy）图像左上角距离canvas原点的距离。
(dWidth,dHeight) 显示到canvas上的宽高（缩放图片）。
例子：

//创建离屏canvas
let canvas=document.createElement("canvas");
canvas.width=400;
canvas.height=400;
let context=canvas.getContext("2d");
//绘制图像
context.drawImage(img,0,0,canvas.width,canvas.height);
//把canvas画布转成img图像
canvas.toBlob(callback,mimeType,quality);
canvas.toBlob((blob)=>{
	//ajax上传
	axios("post",url,blob);
})

现实生活中经常有这样的需求去限制图片上传大小，随着现在相机技术的提高，图像质量高占用空间大，上传后压缩再传给后端能显著提高用户体验，非常友好。