图片来自 Pixiv，Skitterphoto

今天我们探究一下在微信小程序中如何压缩一张图片。

首先来看看 中都有哪些地方用到了图片压缩吧。

1）首页 -> 小测试 ->  功能用到了一些Canvas和图片方面的API，其中在Canvas转图片时使用了可选择压缩程度的API的调用，也就是

wx.canvasToTempFilePath这个接口。

2）词本 中的 功能，因为用到了第三方图片识别接口，需要先选择图片（wx.chooseImage），然后上传进行识别。从表面上看，wx.chooseImage这个API只提供选择图片的功能，但实际上它也具备一定的压缩功能。

那么在微信小程序端适合给图片做压缩的API到底有哪些呢？它们又有哪些特点呢？我们一一来看下。

● wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照。

指定sizeType为['compressed']，即代表从相册或相机拍照后的图片会执行压缩操作。

wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success (res) { const tempFilePaths = res.tempFilePaths }})

● wx.compressImage(Object object)

压缩图片接口，可选压缩质量。基础库>=2.4.0

使用这个API时需要注意基础库的版本。它可以指定压缩的质量[0-100]，但只针对jpg，不支持网络图片。可以配合chooseImage来使用。

wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success (res) { const tempFilePaths = res.tempFilePaths wx.compressImage({      src: tempFilePaths[0]      quality: 80,      success (compressRres) {       const tempFilePath = compressRres.tempFilePath       } }) }})

● CameraContext.takePhoto(Object object)

拍摄照片。

其中quality（成像质量）参数可以设置为high, normal, 或者low，指定为low即代表可以进行一定程度的压缩。

const ctx = wx.createCameraContext()ctx.takePhoto({  quality: 'low', success: (res) => { const tempImagePath = res.tempImagePath }})

除了以上几个API之外，还有一个API也可以变相地实现图片压缩处理，前提是需要一个Canvas组件，然后调用这个API将Canvas转换成图片。

●wx.canvasToTempFilePath(Object object, Object this)

把当前画布指定区域的内容导出生成指定大小的图片。

这个API只针对画布（Canvas）组件有效，但它有个好处就是可以指定输出图片的尺寸，而且还有个参数quality可以同时指定图片的质量（但仅对 jpg 有效）

wx.canvasToTempFilePath({ x: 100, y: 200, width: 50, height: 50, destWidth: 100, destHeight: 100,  fileType: 'jpg,'  quality: 0.8, canvasId: 'myCanvas', success(res) {    const tempFilePath = res.tempFilePath }})

以上就是微信小程序中涉及图片压缩的一些API介绍。

当然抛开微信小程序的API，压缩图片还有许多方式可以实现，比如使用自定义的裁剪功能，将大图片裁剪为小图片，然后再进行一次压缩。又如直接使用第三方库提供的图片裁剪功能，另外还可以直接将图片上传至第三方存储服务，比如七牛云、阿里，腾讯的OSS等，后端接口调取图片时直接使用他们提供的图片处理技术（url后拼接参数即可）。

微信号：agooee     微博：@fromyears