字节小程序
开发者社区
小程序小游戏
登录
解决canvas V2组件无法导出图片问题!

解决canvas V2组件无法导出图片问题!

164浏览作者: chen_d_d

问题:

小程序组件canvas使用type="2d"后 无法正常触发tt.canvasToTempFilePath

解决方案:

方案1.CanvasV2组件通过tt.getFileSystemManager().writeFileSync保存到本地

方案2.将CanvasV2组件内容通过图片的方式绘制到CanvasV1组件再使用t.canvasToTempFilePath获取数据

js部分

  // 方案1
  async getCanvasImgPath() {
    // 获取当前canvasV2组件 base64图片数据
    const base46Data = await this.getBase46Img("canvas_v2")
    // 获取图片地址
    const filePath = this.getImgFile(base46Data)
    return filePath
  },

  getImgFile(base46Data) {
    // 把canvas转换base64数据
    let filePath = `${tt.env.USER_DATA_PATH}/demo.png`;
    const data = tt.base64ToArrayBuffer(base46Data.replace(/^data:image\/\w+;base64,/, ''))
    tt.getFileSystemManager().writeFileSync(filePath, data)
    return filePath
  },
  
  // 方案2
  async getCanvasImgPath2() {
    // 获取当前canvasV2组件 base64图片数据
    const base46Data = await this.getBase46Img("canvas_v2")
    // 绘制canvasV1图片
    await this.drawImage("canvas_v1", base46Data)
    // 获取图片地址
    const filePath = await this.getTempFilePath("canvas_v1")
    return filePath
  },
  getBase46Img(id) {
    return new Promise(resolve => {
      tt.createSelectorQuery()
      .select(`#${id}`)
      .node()
      .exec(async (res) => {
        const canvas = res[0].node;
        const ctx2 = canvas.getContext('2d');
        // 获取base64图片
        const base46Data = ctx2.canvas.toDataURL()
        resolve(base46Data)
      });
    })
  },
  drawImage(id, base46Data) {
    return new Promise(resolve => {
      const ctx = tt.createCanvasContext(id);
      // canvasV1绘制图片
      ctx.drawImage(
        base46Data, 0, 0, 200, 100
      );
      ctx.draw(false, () => {
        resolve()
      })
    })
  },
  getTempFilePath(id) {
    return new Promise (resolve => {
      tt.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 300,
        height: 225,
        destWidth: 300,
        destHeight: 225,
        canvasId: id,
        success: (res) => {
          // 获取文件地址
          resolve(res.tempFilePath)
        },
      });
    })
  },

ttml部分

<view class="container">
  <view class="canvas-item">
    <!-- v1组件 -->
    <canvas
      canvas-id="canvas_v1"
    ></canvas>
  </view>
  <view class="canvas-item">
    <!-- v2组件 -->
    <canvas
      id="canvas_v2"
      canvas-id="canvas_v2"
      type="2d"
    ></canvas>
  </view>
</view>
最后一次编辑于 2024年04月11日
加载中