微信小程序开发 - (图片base64编码)

Base64编码 是网络上最常见的用于传输8Bit字节代码的编码方式之一，可用于在HTTP环境下传递较长的标识信息，因此在很多有关图像的应用或者接口调用中，base64编码常常被用来进行传输图片数据。

Base64编码在小程序中一直不是特别完善，为了解决这类问题，本文根据具体的应用场景总结了三种方法来获取图片的Base64编码。

1. canvas画图

适用场景： 获取canvas绘出的图片的base64编码、使用较早版本的小程序（1.9.9之前）
缺点： canvas只能绘出和屏幕大小一样的图片，当图片大小超过屏幕大小时，无法获取超过屏幕的部分图片的base64编码。

canvas = wx.createCanvasContext(canvas_id)
// 绘制图片到canvas， imgPath为图片的路径
canvas.drawImage(imgPath, 0, 0, imgWidth, imgHeight)
canvas.draw(false, () => {
  wx.canvasGetImageData({
    canvasId: canvas_id,
    x: 0,
    y: 0,
    width: imgWidth,
    height: imgHeight,
    success(res) {
      // 进行png编码
      let pngData = upng.encode([res.data.buffer], res.width, res.height)
      // 对png数据调用接口完成base64编码
      let base64 = wx.arrayBufferToBase64(pngData)
      // ...
    }
  })
})

2. 使用小程序自带接口:

适用场景：因为这个接口是微信近期完善的，所以需要微信的版本较高（1.9.9之后）； 在不需要对图片进行缩放等操作的时候，可以获取任意大小图片的base64编码。
缺点： 只能对给定图片计算base64编码，而更一般情况下，我们需要将图片的宽度缩放至小于或等于屏幕的宽度。

// Base64
let base64 = wx.getFileSystemManager().readFileSync(imgPath, "base64")

3. 通过后台服务器处理

适用场景：在需要对图片先进行缩放操作等预处理再获取base64编码。
缺点： 需要部署云服务器， 编码速度较慢。

# 以下是基于Flask框架的服务器端处理base64请求的代码，仅供参考.
@app.route('/get_base64', methods=['GET','POST'])
def trans_base64():
    data_dir = './data/image'
    file_obj = request.files["img"].read()   
    width = int(round(float(request.form.get('width'))))
    height = int(round(float(request.form.get('height'))))

    img = Image.open(BytesIO(file_obj))
    img = img.resize((width, height), Image.ANTIALIAS)
    output_buffer = StringIO()
    img.save(output_buffer, format='png')
    binary_data = output_buffer.getvalue()
    base64_data = base64.b64encode(binary_data)
    return base64_data

# 小程序端的base64请求代码.
wx.uploadFile({
    url: 'your_host_address:port/get_base64',
    filePath: path,
    formData: {
      'width': sys_width, // resize width.
      'height': sys_width / img_radio // resize height.
    },
    success: function (res) {
      let base64 = res.data
      console.log("base64 is :", base64)
    }
})

总结

之前在计算图片的base64编码上走了不少弯路，总想着不通过后台交互就把这件事搞定，于是看到网上很多教程，类似下面的代码：

urlTobase64(url){
    request({
      url:url,
      responseType: 'arraybuffer', 
      success:res=>{
            let base64 = wx.arrayBufferToBase64(res); 
            base64　= 'data:image/jpeg;base64,' + base64　
            console.log(base64)
          }
    })
 }


wx.chooseImage({
      success:res=>{
        this.urlTobase64(res.tempFilePaths[0]) 
      }
})

初步看是没有什么问题，而且在pc端开发测试时可以正常运行，但是一旦使用手机端测试时就不work了。后来想了一下，我们拿到的图片的临时地址（res.tempFilePaths[0]）都是http开头的，而微信明确规定不支持http类型的request， 所以在手机端测试会有问题。

作者：傻豆蜗壳
链接：https://www.jianshu.com/p/6ae3e2115a2e