微信小程序图片压缩

微高兄信小程序图片压缩有三种方法，一种是使用官方提供的接口 wx.compressImage(Object object) ；一种是通过压缩图片的大小，利用canvas重绘来得到压缩图片；最后一种安装第三方图片压缩包。

由于第一种方法网上很多人说压缩不明显或者失效，所以选择使用canvas重绘来实现图片压缩。同时，该种方法可以控制图片的最大尺寸，保持上传图片大小尺寸相差不多。在我们的学生节晚会小程序中，屏幕显示图片会比较美观一致。

1. 通过 wx.chooseImage 接口选择相机图片

2. 通过 wx.getImageInfo 接口获取图片信息（长宽，类型）

3. 计算压缩比例和最终图片的长宽

5. 通过 wx.canvasToTempFilePath 接口将画布内容导出为图片并获取图片路径

wxml 文件

在文件末尾插入 canvas 组件，通过设置left和配隐top值确保图片不会显示在可视范围内。

一定要设置 canvas-id，这是canvas绘图和导出图片必备的属性。

js 文件

设置与页面绑定的数据：canvas的大小，培念厅也是压缩后图片的大小

1. 将画布内容导出为图片时，指定destWidth和destHeight为压缩后图片的大小。这里遇到过玄学bug，不指定的话，有时候图片不会压缩到规定的大小。

这次项目中做了一册此个图片上传，要求是大于2MB的就压缩成2MB一下的再上传，我这边利用了uniapp的文件接口，使用canvas做了一个压缩上传的功能，目前已上线，使用无问题。

定义canvas

canvas样式

定义数据

打开相册

递归轿姿州上传

删除照片

预览大图

压缩图片

如果看了觉得有帮助的闭蔽，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；

END

往期文章

个人主页

不能指定压缩大小薯友。

微信数亩槐小程序官方API中wx.chooseImage()是可以进行图片压缩的，可惜耐仔的是不能压缩到指定大小。

实际开发中需求可能是压缩到指定大小：

---