oss图片上传api_小程序开发日记 图片压缩

图片来自 Pixiv，Skitterphoto

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

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

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

wx.canvasToTempFilePath这个接口。

2)词本 中的日文OCR识别 功能，因为用到了第三方图片识别接口，需要先选择图片(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

推荐阅读： 小程序开发日记 -- QQ小程序云开发 小程序开发日记 --  再看 QQ小程序 小程序开发日记 -- 猜个动画的二三事