关于canvas v2 保存图片的实现

1、创建canvas v2实例

<canvas id="myCanvas" type="2d"></canvas>

2、获取实例

Page({
 onReady() {
    tt.createSelectorQuery()
      .select("#myCanvas")
      .node()
      .exec((res) => {
        const canvas = res[0].node;
        this.canvasCtx = canvas.getContext("2d");
        this.canvasCtx.clearRect(0, 0, res[0].node.width, res[0].node.height);
        this.canvasCtx.fillStyle = "red";
        this.canvasCtx.fillRect(0, 0, 50, 50);
      });
  },
})

3、实现保存逻辑

Page({
	saveImg() {
    // 把canvas转换base64数据
    let base64IMG = this.canvasCtx.canvas.toDataURL()
    console.log('---toDataURL---', base64IMG)
    let filePath = `${tt.env.USER_DATA_PATH}/demo.png`;
    tt.getFileSystemManager().writeFileSync(filePath, tt.base64ToArrayBuffer(base64IMG.replace(/^data:image\/\w+;base64,/, '')))
    this.data.imgPath_ttfile = `${tt.env.USER_DATA_PATH}/demo.png`
    this.setData({
      imgPath_ttfile: this.data.imgPath_ttfile
    })
  }
})

效果图

真机预览

附代码片段如下：

https://developer.open-douyin.com/ide/minicode/UufgBFr