收藏
回答

如何解决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

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

3 个回答

  • 社区技术运营专员-灵芝
    社区技术运营专员-灵芝
    01-20

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

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

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


    02-28
    赞同
    回复 4
    • russ😈
      russ😈
      02-29
      代码好像不能完全贴完整,我上了图,您可以花点时间看看,canvas是在最外层定义的一个变量 let canvas = null; 忘记截了 不好意思
      02-29
      回复
    • russ😈
      russ😈
      02-29
      res[0].node应该就是canvas实例了,使用一个变量保存这个值就可以了!
      02-29
      回复
    • Abu
      Abu
      03-02回复russ😈
      嗯嗯 谢谢你的回复,那天自己看文档找到获取实例方法了。
      03-02
      回复
    • russ😈
      russ😈
      03-02回复Abu
      好的
      03-02
      回复
  • 微盟
    微盟
    01-20

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

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

    this.ctx.draw...

    01-20
    赞同
    回复 3
    • russ😈
      russ😈
      01-20
      是的 但是我要使用canvasToTempFilePath这个api导出画布成图片,这个api是要在draw的回调里调用才可以这保证图片导出成功,所以就想问下canvas 2里面怎么导出图片
      01-20
      回复
    • 微盟
      微盟
      01-20回复russ😈
      在小程序里面,你需要用官方提供的方法,放在回调里面对你现有的逻辑应该没什么影响吧
      01-20
      回复
    • russ😈
      russ😈
      01-20回复微盟
      都是使用官方api,现在的情况就是在使用canvas2d的ctx上下文方法时调用不了draw这个方法,从而不能调用canvasToTempFilePath这个api导出画布到图片
      01-20
      回复
登录 后发表内容
问题标签