微信公众号-图片裁剪并实现上传

一、背景

最近有个需求，需要用户按比例上传图片，即需要在上传前，让用户手动对图片进行裁剪。

看到这个诉求，我就去扒微信的api，发现有个属性叫wx.cropImage是做图片裁剪的，且可以传入对应的裁剪比例。在介入开发后才发现，这个是小程序的api，而非微信公众号的。阅读文档发现，小程序和微信公众号中都有一个叫chooseImage的api，但是返回的数据却不一样，小程序大家开发的都比较多了。本篇文章主要给大家讲一下公众号的图片裁剪&上传，实现效果如下图：

二、图片选择

选择图片使用chooseImage这个api，具体使用如下所示。选择成功后，返回localIds，是选定照片的本地ID列表，注意这个和小程序是不同的。

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: (res)=> {
  let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
  }
});

三、预览图片

wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
});

四、获取本地图片

通过chooseImage拿到本地图片id 列表后，那么如何获取到图片呢。毕竟我们也没有办法直接使用图片id进行上传等交互。这个时候就引入了新的api，即：getLocalImgData。该api就是通过图片的localID，来获取图片的base64数据。拿到该数据后，就可以和后端接口进行交互了。