收藏
回答

Canvas 第二次draw失效,图片不显示

const ctx = wx.createCanvasContext('myCanvas');


let canvasW = 525;

let canvasH = 420;


// 将图片绘制到画布

// drawImage(string imageResource, number dx, number dy, number dWidth, number dHeight, number sx, number sy, number sWidth, number sHeight);

ctx.drawImage(src, 0, 0, 300, 200);

//必须要用到, 并且需要在绘制成功后导出图片

ctx.draw(false, function() {

//  导出图片

wx.canvasToTempFilePath({

width: canvasW,

height: canvasH,

destWidth: canvasW,

destHeight: canvasH,

canvasId: 'myCanvas',

fileType: 'jpg',

success: function(res) {

// res.tempFilePath为导出的图片路径

typeof cb == 'function' && cb(res.tempFilePath);

console.log("裁剪完毕");

return false;

}

});

});


首次执行该段代码,canvas显示出图片

第二次执行该段代码,canvas不显示图片,调试发现ctx.draw()第二次没有执行,什么原因?

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

4 个回答

  • 卢霄霄
    卢霄霄
    2018-11-05

    是不是 canvas用wx:if隐藏过,然后canvas实例又没有重新初始化啊?

    2018-11-05
    有用 1
    回复 18
    • Cookie
      Cookie
      2018-11-05

      是啊是啊,用if隐藏了,但是我初始时,就是隐藏的,点击按钮后才显示,canvas也跟着显示

      2018-11-05
      回复
    • 卢霄霄
      卢霄霄
      2018-11-05回复Cookie

      你试试用hidden,不用wx:if呢,或者每次setData显示以后都重新 wx.createCanvasContext呢

      2018-11-05
      回复
    • Cookie
      Cookie
      2018-11-05回复卢霄霄

      wx:if的问题,用wx.createCanvasContext()没有解决,将if

      改为hidden,问题解决

      2018-11-05
      回复
    • 卢霄霄
      卢霄霄
      2018-11-05回复Cookie

      好哦,不追究原因了么~ 因为我这边也是用的 wx:if 控制的隐藏显示,正常的,可以重复draw呢。如果有兴趣的话,可以提供的代码片段,我帮你看看

      2018-11-05
      回复
    • 2018-11-05回复卢霄霄

      我也遇到了这个问题

      2018-11-05
      回复
    查看更多(13)
  • ネф イω
    ネф イω
    2019-06-13

    我遇见的问题开发者工具里:第一次能绘制成功,第二次不行了!

    真机预览 没任何问题


    总结下我怀疑是第一次canvas对象id没有被销毁,如第二次继续使用同id就会失败

    解决办法,用时间戳生成如CanvasId1560392359912,能解决我遇见的问题

    2019-06-13
    有用
    回复 1
    • ·D·
      ·D·
      09-18
      如果是第一次对象id没有被销毁,用时间戳生成id,那不就是会每次创建的id都没有被销毁吗?这样次数多了会不会越来越卡啊
      09-18
      回复
  • 城主
    城主
    2019-01-16

    坑啊

    我也是想创建一个temp canvas,用完就隐藏,要用就显示,同步的设置 showCanvas 就出这个bug

    刚刚发现问题就看到你提的这个

    2019-01-16
    有用
    回复
  • Cookie
    Cookie
    2018-11-05

    感谢@卢霄霄 同学解决了我的问题QAQ

    2018-11-05
    有用
    回复
登录 后发表内容