支付宝小程序前端实现图片转换base64

前言:
在小程序开发中往往会遇到图片转base64的场景，目前小程序画布，提供了CanvasContext.toDataURL用于获取画布指定区域的 data URL 数据。返回的数据就是base64图片数据，可直接使用image组件展示。

一、页面中使用canvas组件

xml文件中放入canvas以便后续根据canvas来使图片转化base64

<!--axml-->
<view>
 <canvas 
      id="canvas"
      width="610"
      height="610"
      class="canvas"
      onTouchStart="log"
      onTouchMove="log"
      onTouchEnd="log"
    />
<image mode="widthFix"  src="{{dataImage}}"/>
</view>

注:
• 如前端不需要展示canvas可进行隐藏处理

二、js中使用CanvasContext.toDataURL将图片转为base64

//js
data: {
    dataImage:"",
},onLoad(){
  const ctx = my.createCanvasContext('canvas');
  ctx.setFillStyle('#108ee9');
  ctx.arc(50, 50, 50, 0, Math.PI * 2, true);
  ctx.fill();
  ctx.draw();
  //可通过设置fileType和quality来设置图片的格式和质量
  ctx.toDataURL({
    x: 50,
    y: 50,
    width: 50,
    height: 50,
    destWidth: 100,
    destHeight: 100,
  }).then(dataURL=>{
    ctx.drawImage(dataURL, 0, 0);
    console.log("dataURL", dataURL)
    this.setData({
      dataImage:dataURL
    })
    ctx.draw();
  })
  
}

注:
• ctx.toDataURL方法是异步的
• 通过设置fileType和quality来设置图片的格式和质量

显示效果如下：

三、小程序中开发者实现转换用户的本地相册图片为base64示例

可通过三个步骤实现：
第一步：使用my.chooseImage拍照或从本地相册中选择图片。
第二步：使用CanvasContext.drawImage把上一步获取到的图片绘制图像到画布，图像保持原始尺寸。
第三步：CanvasContext.toDataURL获取画布指定区域的 data URL 数据。

小程序前端xml代码：

<view onTap="tap">
点击转换
</view>
<canvas id="canvas"></canvas>
<image mode="scaleToFill" src="{{src}}"/>

小程序页面js代码：

Page({
  data: {
  },
  onLoad() {
    this.ctx = my.createCanvasContext('canvas');
  },
  tap(e) {
    let ctx = this.ctx
    let that = this
    my.chooseImage({ /** 调取相册*/
      sourceType: ['camera', 'album'],
      count: 1,
      success: (res1) => {
        console.log('res1', res1.apFilePaths[0])
        ctx.drawImage(res1.apFilePaths[0], 0, 0);
        ctx.draw(false, () => {
          ctx.toDataURL({
          }).then(dataURL => {
            console.log('dataURL', dataURL)
            that.setData({
              src: dataURL
            })
          })
        })
      },
      fail: (e) => {
        console.log('fail----------------------')
      }
    })
  },
});