收藏
回答

如何解决Canvas 2D使用canvasToTempFilePath?

 onLoad() {
    wx.createSelectorQuery()
      .select('#cardCanvas')
      .fields({
        node: true,
        size: true,
      })
      .exec(this.initCanvas.bind(this))
  },
  initCanvas(res) {
    const width = res[0].width;
    const height = res[0].height;
    const canvas = res[0].node;
    const ctx = canvas.getContext('2d');
    const dpr = wx.getSystemInfoSync().pixelRatio;

    canvas.width = width * dpr;
    canvas.height = height * dpr;
    ctx.scale(dpr, dpr);

    ctx.draw(false() => {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width,
          height,
          destWidth: width,
          destHeight: height,
          canvasId: 'cardCanvas',
          fileType: 'jpg',
          quality: 1,
          success(res) {
            console.log(res.tempFilePath)
          }
        })
      }
    )
  }


场景是在使用canvas2d时导出画布输出到图片,但是发现如下问题

1、使用canvas2d的上下文ctx调用draw()方法的时候报错:ctx.draw is not a function;at SelectorQuery callback function

2、canvasToTempFilePath的官方文档写着在 draw()回调里调用该方法才能保证图片导出成功。文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html

回答关注问题邀请回答
收藏

4 个回答

  • 禾店短剧系统
    禾店短剧系统
    2021-06-03
    const dpr = wx.getSystemInfoSync().pixelRatio
            canvas.width = 图片宽 * dpr
            canvas.height = 图片高 * dpr
            ctx.scale(dpr, dpr)
    


    2021-06-03
    有用 1
    回复
  • Ablikim
    Ablikim
    2020-02-28

    你好,怎么获取canvas组件实例?


    2020-02-28
    有用
    回复 5
    • russ😈
      russ😈
      2020-02-29
      代码好像不能完全贴完整,我上了图,您可以花点时间看看,canvas是在最外层定义的一个变量 let canvas = null; 忘记截了 不好意思
      2020-02-29
      2
      回复
    • russ😈
      russ😈
      2020-02-29
      res[0].node应该就是canvas实例了,使用一个变量保存这个值就可以了!
      2020-02-29
      1
      回复
    • Ablikim
      Ablikim
      2020-03-02回复russ😈
      嗯嗯 谢谢你的回复,那天自己看文档找到获取实例方法了。
      2020-03-02
      1
      回复
    • russ😈
      russ😈
      2020-03-02回复Ablikim
      好的
      2020-03-02
      1
      回复
    • 游戏人生
      游戏人生
      2020-03-30
      新版canvasApi对应的选取对象必须是 选择器获取的node节点
      const query = wx.createSelectorQuery();
          const canvasObj = await new Promise((resolve, reject) => {
            query.select('#posterCanvas')
              .fields({ node: true, size: true })
              .exec(async (res) => {
                resolve(res[0].node);
              })
          });
          console.log(canvasObj);
          wx.canvasToTempFilePath({
            //fileType: 'jpg',
            //canvasId: 'posterCanvas', //之前的写法
            canvas: canvasObj, //现在的写法
      success: (res) => {},
            fail(res) {
              console.log(res);
            }
          }, this)
      这是我写的文章
      https://developers.weixin.qq.com/community/develop/article/doc/000242073903a04e082ab595b52013
      2020-03-30
      2
      回复
  • 灵芝
    灵芝
    2020-01-20

    你好,canvas2d不需要使用draw方法,参数传一个 canvas 对象可以使用 canvasToTempFilePath,具体可参考:https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html

    2020-01-20
    有用
    回复 15
    • russ😈
      russ😈
      2020-01-21
      好的谢谢,稍后我试一下,但是api上面那句要在draw里面才可以保证图片输出那话感觉有点误导呀。
      2020-01-21
      回复
    • AshinsLab
      AshinsLab
      2020-02-29回复russ😈
      问下楼主解决了吗,我也是同样的问题,始终报错 this.canvasToTempFilePath is not a function
      2020-02-29
      回复
    • russ😈
      russ😈
      2020-02-29回复AshinsLab
      头晕 这里的代码不能完全显示 我截图给您了
      2020-02-29
      回复
    • russ😈
      russ😈
      2020-02-29回复AshinsLab
      canvas是在最外层定义的一个变量 let canvas = null; 忘记截了 不好意思
      2020-02-29
      回复
    • AshinsLab
      AshinsLab
      2020-02-29回复russ😈
      非常感谢🙏,我是在自定义组件中使用,但始终提示上面我说的错误,也不知道到底怎么调用,悲伤
      2020-02-29
      回复
    查看更多(10)
  • 微盟
    微盟
    2020-01-20

    错误已经提示了,ctx.draw不是一个function,用法错误:

    this.ctx = wx.createCanvasContext('你的canvasId');

    this.ctx.draw...

    2020-01-20
    有用
    回复 10
    • russ😈
      russ😈
      2020-01-20
      是的 但是我要使用canvasToTempFilePath这个api导出画布成图片,这个api是要在draw的回调里调用才可以这保证图片导出成功,所以就想问下canvas 2里面怎么导出图片
      2020-01-20
      回复
    • 微盟
      微盟
      2020-01-20回复russ😈
      在小程序里面,你需要用官方提供的方法,放在回调里面对你现有的逻辑应该没什么影响吧
      2020-01-20
      回复
    • russ😈
      russ😈
      2020-01-20回复微盟
      都是使用官方api,现在的情况就是在使用canvas2d的ctx上下文方法时调用不了draw这个方法,从而不能调用canvasToTempFilePath这个api导出画布到图片
      2020-01-20
      回复
    • 责任奋斗
      责任奋斗
      2020-03-30回复russ😈
      我也遇到同样的问题了 ,你那边是怎么解决的?请指点下
      2020-03-30
      回复
    • 责任奋斗
      责任奋斗
      2020-03-30
      2d画图回调 咱们那边怎么解决的?我也遇到了?
      2020-03-30
      回复
    查看更多(5)
登录 后发表内容
问题标签