微信小程序上传图片转化为base64格式的方法

Question

在做一个花卉识别的小程序，接口规定需要上传的是base64格式的图片。
在小程序中测试了确实有FileReader对象，readAsDataURL方法也是有的

通过chooseImage上传图片得到tempFilePath
{path: "wxfile://tmp_713446332o6zAJs2J8Y_akx660xBvls13t1aQ79edf96a81428a0cbbd12d556491c41d.png", size: 1325}
然后把这个作为参数传入readAsDataURL就报错了
这是报错

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

应该是微信chooseImage上传图片生成的是临时路径，FileReader对象获取不到图片？

不知道这里如何解决比较合适

Answer 1

小程序中不支持filereader。官方回答，接口正在设计中，我也在等这样的接口。你找一圈会发现都是下面的代码

var reader = new FileReader()
reader.onload = function (e) {
    var arrayBuffer = e.target.result;
    var base64 = wx.arrayBufferToBase64(arrayBuffer);
}
reader.readAsArrayBuffer(new Blob(res.tempFiles))

然而获取的base64并不是我们想要的。

Answer 2

canvas = wx.createCanvasContext(canvasID)
// 1. 绘制图片至canvas
canvas.drawImage(imgPath, 0, 0, imgWidth, imgHeight)
// 绘制完成后执行回调，API 1.7.0
canvas.draw(false, () => {
  // 2. 获取图像数据， API 1.9.0
  wx.canvasGetImageData({
    canvasId: canvasID,
    x: 0,
    y: 0,
    width: imgWidth,
    height: imgHeight,
    success(res) {
      // 3. png编码
      let pngData = upng.encode([res.data.buffer], res.width, res.height)
      // 4. base64编码
      let base64 = wx.arrayBufferToBase64(pngData)
      // ...
    }
  })
})

参考这里