如下截图：
点击文件选择框，我们不妨选一张尺寸比较大的图片，例如下面这种2M多的钓鱼收成照：
于是图片歘歘歘地传上去了：
此时我们点击终极上传完毕的图片地址，会创造原来2M多3000多像素宽的图片被限定为400像素宽了：
保存到本地会创造图片尺寸已经变成只有70K了：
以上便是图片前端压缩并上传demo的完全演示。
二、实现事理
要想利用JS实现图片的压缩效果，事理实在很大略，核心API便是利用canvas的drawImage()方法。
Canvas实质上便是一张位图，而drawImage()方法可以把一张大大的图片绘制在小小的Canvas画布上，不久等同于图片尺寸压缩了？
对付本案例的压缩，利用的5个参数的API方法：
context.drawImage(img, dx, dy, dWidth, dHeight);复制代码
各参数详细含义可以拜会“Canvas API中文文档-drawImage”，这里不展开。
举例：
一张图片（假设图片工具是img）的原始尺寸是40003000，现在须要把尺寸限定为400300大小，很大略，事理如下代码示意：
var canvas = document.createElement('canvas');var context = canvas.getContext('2d');canvas.width = 400;canvas.height = 300;// 核心JS就这个context.drawImage(img,0,0,400,300);复制代码
把大图片画在一张小画布上，压缩就这么实现了，是不是大略的有点超乎想象。
三、如果想要上传或下载？
如果想要上传图片或者下载图片，可以利用canvas.toDataURL()或者canvas.toBlob()方法前辈行转换。
1. canvas.toDataURL()
语法如下：canvas.toDataURL(mimeType, qualityArgument)复制代码
可以把画布转换成base64格式信息图像信息，纯字符的图片表示法。
个中：
mimeType表示canvas导出来的base64图片的类型，默认是png格式，也即是默认值是'image/png'，我们也可以指定为jpg格式'image/jpeg'或者webp等格式。file工具中的file.type便是文件的mimeType类型，在转换时候恰好可以直接拿来用（如果有file工具）。
qualityArgument表示导出的图片质量，只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92，是一个比较合理的图片质量输出参数，常日情形下，我们无需再设定。
更多关于toDataURL()方法的信息可以拜会“Canvas API中文文档-toDataURL()”。
2. canvas.toBlob()方法
语法如下：canvas.toBlob(callback, mimeType, qualityArgument)复制代码
可以把画布转换成Blob文件，常日用在文件上传中，由于是二进制的，对后端更加友好。
和toDataURL()方法比较，toBlob()方法是异步的，因此多了个callback参数，这个callback回调方法默认的第一个参数便是转换好的blob文件信息，本文一开始的demo案例中的文件上传便是将canvas图片转换成二进制的blob文件，然后再ajax上传的，代码如下：
// canvas转为blob并上传canvas.toBlob(function (blob) { // 图片ajax上传 var xhr = new XMLHttpRequest(); // 开始上传 xhr.open(\"大众POST\公众, 'upload.php', true); xhr.send(blob); });复制代码
更多关于toBlob()方法的信息可以拜会“Canvas API中文文档-toBlob()”。
一旦有了可传输的图像数据，上传下载就好实现了。例如下载前端压缩好的图片，可以参考我上一篇在掘金发布的文章：“纯JS天生并下载各种文本文件或图片”。
四、总结
经由“图片→canvas压缩→图片”三步曲，我们完成了图片前端压缩功能。
作者：张鑫旭
链接：https://juejin.im/post/5bec3c6cf265da614312a0fa
来源：掘金
著作权归作者所有。商业转载请联系作者得到授权，非商业转载请注明出处。
