收藏
回答

canvas的生命周期和wx.canvasToTempFilePath的使用疑惑

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 wx.canvasToTempFilePath 微信安卓客户端 8.0.24 2.25.4

我的需求场景是,传入正文和标题,通过canvas2D将其绘制为图片后,调用wx.canvasToTempFilePath接口,获取其临时地址,后续再做展示等使用。

此功能在绘制单一段落时没有问题,我考虑修改为传入一个数组,遍历这个数组,每生成一段文本,就调用wx.canvasToTempFilePath接口将其存为图片,然后清空当前canvas,再绘制第二段文本...最后得到每一段文字对应的图片临时地址。实际测试发现,每次循环生成的图片是一样的,第二次的绘制内容会直接叠加在第一次的内容上,如图所示 我尝试在清空当前canvas时加入延迟时间,结果生成的图片就都是空白的了,不知道问题出在哪里?

以下为示例代码:

js

  onlyDrawPic() {
        //用于循环画图
    wx.createSelectorQuery().select('#myCanvas').fields({ nodetruesizetrue })
      .exec((res) => {
        const textCanvas = res[0].node
        for (let item of list) {
                //list like [{"title":"标题","content":"正文"}]
          this.drawPic(item)
        }
      })
  }
    drawPic(item) { 
      setTimeout(() => {
                drawContent(item);//实际绘图,逻辑略
        wx.canvasToTempFilePath({
          canvas: canvas,
          successres => {
            // 生成的图片临时文件路径
            console.log(res.tempFilePath)
          },
        })
        //等待canvas转图片延时
      }, 1000)
    //生成成功后,重置画布大小,清空画布
    setTimeout(() => {
      canvas.height = 1
      canvas.width = 1
    }, 5000);
  },


wxml

  


最后一次编辑于  2022-09-13
回答关注问题邀请回答
收藏

1 个回答

  • 一面
    一面
    2022-09-09

    循环中,每次生成的图片都如图所示。

    2022-09-09
    有用
    回复 2
    • 一面
      一面
      2022-09-09
      第二次生成的是较短的段落,可以看到直接叠加在第一次的图像上了,我的页面只使用了一个canvas,不知道能否这样操作?还是要声明多个canvas呢?
      2022-09-09
      回复
    • 一面
      一面
      2022-09-09
      通过打日志的时间来看,两次图片生成间隔很快,没有管settimeout设置的延迟
      2022-09-09
      回复
登录 后发表内容