日常开发中经常会遇到上传图片的需求，随着手机的蓬勃发展，现在拍出来的照片分辨率越来越高，随之带来的问题就是图片占用空间越来越大，如果我们直接上传图片可能就会浪费很大一笔资源，本文主要讲解基于 Vue + Vant ，实现移动端图片选择，并用 Canvas 压缩图片，最后上传至服务器。还会封装一个工具类，方便直接调用。

一、工具类封装

先上代码，封装一个 CompressImageUtils 工具类：

定义的最大宽度和最大高度均为 500，如果图片的宽高至少有一个超出了 500，都会被等比压缩，不用担心变形。可以根据自己项目需要改变maxWidth 和 maxHeight 。

这里直接把压缩的最大高度和最大宽度写死为 500 了，没有在调用时传。因为一个项目压缩的逻辑和大小一般都一致的，没必要在每次调用的时候传。当然如果想写的灵活一点，可以在 compressImage 方法里再把 maxWidth 、 maxHeight 和压缩质量船上。

compressImage 方法返回的是 blob 值，根据服务端接口需要可以改为返回 base64，只需将 resolve(blob) 改为 resolve(base64) 即可。

注意一点，对于有些宽高没到 500，且分辨率很小的图片，压缩之后可能比之前还大。猜测可能是 canvas 生成的图片分辨率要比原来高一些，所以最终的图片比压缩前更大。可以在调用的地方加个判断，如果压缩完的大小比原图小，就上传压缩后的图片；如果如果压缩完的大小比原图大，就上传原图。

二、如何使用

将 CompressImageUtils 引入到目标文件，然后调用 compressImage 方法，即可在回调里获得压缩后的结果。注意 compressImage 方法返回的是 Promise。
省略其他无关代码，只保留跟压缩图片和上传相关的：

在返回结果中加了层判断，压缩后比原来更大，则将原图上传；压缩后比原来小，上传压缩后的。解决压缩后比原图更大的情况。

三、使用效果

先上传一个非常大的，尺寸为 6016 × 4016，16.8M 的大图，看输出日志，压缩后大小仅为 260k 左右。此时判断压缩后比压缩前小，上传压缩图到服务器。

再看个尺寸 300 × 300，12k 的小图，压缩前大小是 11252，压缩后大小是 93656，大了很多。此时判断压缩后比压缩前更大，上传的是原图。

总结：这个工具类对大图的压缩效果很明显，不管多大的图，压缩之后基本不会超过 300k。但对某些小图可能出现压缩完反而更大的情况。在调用的地方加层压缩后和压缩前大小的比较判断，会完美解决这个问题。