小程序获取图片base64编码

项目中遇到了这个问题，在搜索过程中看到别人的博文，大多是下面这种方法，大致如下：

let imgObj = {
  count: 1,
  success: (res) => {
    let tempFilePaths = res.tempFilePaths;
    wx.request({
      url: tempFilePaths[0],
      responseType: 'arraybuffer',
      success: function (res) {
        let base64 = wx.arrayBufferToBase64(res.data);
      }
    });
  },
  fail: (res) => {
    wx.showToast({
      title: res,
      icon:'none'
    });
  }
}
wx.chooseImage(imgObj);

开发者工具中是可以获取到的，但是拿手机预览或者真机调试的时候，获取base64这个方法的url是不能用临时路径的，所以这个方法也就走不通了，那么就只能借助canvas了。

首先在wxml文件中写一个canvas

<canvas canvas-id='canvas' class='canvas'></canvas>

js文件中需要引入插件upng.js

const upng = require('../../common/libs/upng-js/UPNG.js')

获取base64代码如下：

let _this = this;
let imgObj = {
  count: 1,
  success: (res) => {
    let tempPath = res.tempFilePaths[0];
    wx.showLoading({
      title: '图片加载中',
      mask: true,
    });
    //获取图片的宽高
    wx.getImageInfo({
      src: tempPath,
      success: res => {
        let ratio = 2;
        let canvasWidth = res.width
        let canvasHeight = res.height;
        // 保证宽高均在300以内
        while (canvasWidth > 300 || canvasHeight > 300) {
          //比例取整
          canvasWidth = Math.trunc(res.width / ratio)
          canvasHeight = Math.trunc(res.height / ratio)
          ratio++;
        }
        _this.setData({
          imgWidth: canvasWidth,
          imgHeight: canvasHeight
        })
        let canvas = wx.createCanvasContext('canvas');
        // 绘制图片至canvas
        canvas.drawImage(tempPath, 0, 0, _this.data.imgWidth, _this.data.imgHeight);
        // 绘制完成后
        canvas.draw(false, () => {
          //获取图像数据
          wx.canvasGetImageData({
            canvasId: 'canvas',
            x: 0,
            y: 0,
            width: _this.data.imgWidth,
            height: _this.data.imgHeight,
            success(res) {
              // 获取png编码
              let pngData = upng.encode([res.data.buffer], res.width, res.height);
              // 获取base64
              let base64 = wx.arrayBufferToBase64(pngData);
            },
            fail(res) {

            },
            complete(){
              wx.hideLoading();
            }
          })
        })
      },
      fail: res => {
        wx.hideLoading()
      }
    })
  },
  fail: (res) => {

  }
};
wx.chooseImage(imgObj);

代码中限制了图片大小在300以内，所以只需要设置canvas的宽高大于300px即可，这样可以有效地限制绘制图片的大小以及获取到base64的大小，从而也缩短了转化base64的时间。

注：尽量还是用wx.uploadFile做图片上传，公司项目中虽然用该方法获取到了图片的base64编码，但是最终还是用uploadFile做的图片上传。

如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。