收藏
回答

canvasToTempFilePath: fail canvas is empty?

PC端能正常生成图片,手机端调试就报错??

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

4 个回答

  • 大宇
    大宇
    2022-04-14

    你好,可以分享一下代码吗?同一个问题困扰了两天了,感谢

    2022-04-14
    有用
    回复
  • yuan
    yuan
    2020-06-05

    代码:

    <view style='width:0px;height:0px;overflow:hidden;'>  

        <canvas class="myCanvascanvas-id="mycanvastype="2d"/>

      </view>   

    //绘制画布

      draImg(){

        var logo = this.data.list[this.data.current];

        if(!logo){

          return;

        }

        ctx.drawImage(logo, 0, 0, 750, 1000);

        ctx.drawImage(this.data.qrcode, 580, 830, 129, 129)

        ctx.draw()

        ctx.setFontSize(34)

        ctx.fillText(this.data.nickname, 35, 857)

        ctx.draw(true)

        this.okgenerate();

      },

      //生成分享图

      okgenerate() { //生成图片方法

        var that = this

        setTimeout(() => {

          wx.canvasToTempFilePath({ //生成图片

            quality: 1,

            canvasId: 'mycanvas',

            success: function (res) {

              wx.saveImageToPhotosAlbum({  //保存生成的图片到手机相册里

                filePath: res.tempFilePath,

                success(res) {

                  wx.showToast({

                    title: '保存成功',

                    icon: 'success',

                    duration: 2000

                  })

                }

              })

            },

            fail: function (res) {

              console.log(res)

            }

          },that)

        }, 500)

      },


    2020-06-05
    有用
    回复
  • KE
    KE
    2020-06-05

    你的canvas标签是否加了wx:if或者hidden判断 贴一下你的代码

    2020-06-05
    有用
    回复 3
    • yuan
      yuan
      2020-06-05
      贴了
      2020-06-05
      回复
    • KE
      KE
      2020-06-05回复yuan
      wx.canvasToTempFilePath这个方法必须在draw() 回调里调用该方法




      官方文档https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html




      ctx.draw(true,this.okgenerate)
      2020-06-05
      回复
    • yuan
      yuan
      2020-06-05回复KE
      搞定了,之前用旧版接口,因为调试版本库问题在手机上不能保存。现在切换成最新版本库,使用最新接口完美解决。
      2020-06-05
      回复
  • Samuel
    Samuel
    2020-06-05

    贴代码吧

    2020-06-05
    有用
    回复 6
    • yuan
      yuan
      2020-06-05
      贴了
      2020-06-05
      回复
    • Samuel
      Samuel
      2020-06-05
      <canvas class="myCanvas" canvas-id="mycanvas" type="2d"/> 换成  <canvas class="myCanvas" canvas-id="mycanvas"></canvas>
      2020-06-05
      回复
    • KE
      KE
      2020-06-05回复Samuel
      好像最新的 type=2d坑很多 我也不用这个
      2020-06-05
      回复
    • Samuel
      Samuel
      2020-06-05回复KE
      恩,之前的用习惯了,新的应该绘制性能更好一些,有时间可以研究一下
      2020-06-05
      回复
    • yuan
      yuan
      2020-06-05回复Samuel
      搞定了,之前用旧版接口,因为调试版本库问题在手机上不能保存。现在切换成最新版本库,使用最新接口完美解决。
      2020-06-05
      回复
    查看更多(1)
登录 后发表内容
问题标签