上传图片是小程序常见的功能，例如点评类小程序邀请用户分享照片、电商类小程序要求商家上传商品照片。

伴随着照片像素越来越高，图片体积越来越大，小程序开发者需要压缩图片，否则将导致用户上传图片失败或加载时间过长等影响体验的情况。

小程序团队已提供 wx.chooseMedia、wx.canvasToTempFilePath、wx.compressImage 3 个图片类接口，便于开发者在不同应用场景下处理图片。除此以外，这 3 个接口的巧妙结合能够满足更多元化的图片压缩需求。下面就来看看怎样使用吧！

①

wx.chooseMedia 支持在使用小程序过程中拍摄或从手机相册选择图片或视频，其 sizeType 属性支持是否上传缩略图。该接口应用简便，接入即可实现压缩图片效果，省时省力。

然而，该接口在压缩图片方面也有一定的限制：

• 无法指定压缩质量

• 部分安卓机型存在压缩失效的情况

• iOS 和安卓的压缩机制不同，需要进行合理兼容

②

开发者可以通过控制 Canvas.createImage 绘制图片到 Canvas，然后利用 wx.canvasToTempFilePath 接口转换成图片。这种方法能够高效控制图片宽高尺寸以及压缩质量，非常适用于有图片要求的场景。

但是这种方式也会存在一定的限制：

• 支持控制宽高，但不建议原图宽度或高度超过 4096，否则会有绘制失败的风险

• iOS 和安卓的压缩机制不同，需要进行合理兼容

• 通过 Canvas 转换的图片存在略微色差

③

开发者可以调用 wx.compressImage 接口直接压缩图片，而且支持选择压缩质量，不限制图片宽高尺寸，非常适用于处理特殊大小的图片。

同时这种方式也需要考虑不同系统的压缩差异：

• 在压缩到极限值时，iOS 压缩图画质不会随着压缩质量变小而变化

• 在压缩质量小于 1 时，安卓系统输出的画质将不再变小

 多方式结合处理 

回顾常见的小程序业务场景，图片处理主要聚焦于用户上传图片、列表展示这 2 个环节，可以结合以上 3 个接口实现最佳图片处理方式，既能够利用接口自带的压缩功能，省时省力；又能够解决图片太大造成的压缩难题。

Step 1: 判断系统类型

判断当前系统是 iOS 系统还是安卓系统

Step 2: 根据系统选择上传方式

• iOS 系统：设置 sizeType 为 ['compressed']，利用 iOS 压缩体系自动压缩

• 安卓系统：设置 sizeType 为 ['original', 'compressed']，让用户自主选择上传原图或压缩图。这种方式一方面利用接口自带的压缩能力； 另一方面如果图片宽高大于安卓能清晰压缩的值（例如40000），用户会预览到比较模糊的照片而选择上传原图

Step 3: 验证大小，手动压缩

当用户选择图片后，wx.chooseMedia 返回的 tempFiles 显示对应图片的大小。如果该图片大小大于限制值，则进行手动压缩。

Step 4: 根据宽高选择压缩方式

通过 wx.getImageInfo 获取图片的宽高：

• 如果宽度或高度大于 4096，调用 wx.compressImage 强制压缩

• 如果宽度和高度都小于 4096，绘制 Canvas 实现压缩，设置压缩基础宽高为 1280

如有其他小程序应用相关的问题，可在 微信开放社区小程序交流专区 发帖互动，技术专员将为大家解答及进行深度交流。

原创｜腾讯前端开发工程师 maureenwan