收藏
回答

canvas 画多张照片的时候 有时候会出现画不上去的问题?



70% -80%时候是好的

偶尔就会出现图片没有画好也进入callback了

图片都已经getImageInfo 获取临时路径了

有遇到过同样问题的朋友吗






补充:

这里是循环进来的 数据 photoSrc的数量是1-6



补充:

感谢 Xiushan Li 的解答


我们把白色的方框看做拼图的图片位置

紫色位置为边框  层级是最高的

图片只能放在边框里 互相不影响 图片可以移动 放大




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

5 个回答

  • Yayure
    Yayure
    09-06

    我以前也碰到过,个人认为是canvasToTempFilePath接口的调用会影响下一次的draw,你可以试试在canvasToTempFilePath的成功回调后resolve再进行下一次draw

    09-06
    赞同
    回复 4
    • 💮肥宅店長.
      💮肥宅店長.
      09-06
      我是不停的在drawImage 之后Draw 最终canvasToTempFilePath 这个api已经生成照片了 不需要在draw了呀
      09-06
      回复
    • Yayure
      Yayure
      09-06回复💮肥宅店長.
      问下第一次画的图片是不是百分百好的(指编译后的第一次绘画)
      09-06
      回复
    • Yayure
      Yayure
      09-06回复💮肥宅店長.
      我以前碰到的是draw之后马上调用canvasToTempFilePath,下一次draw的图片基本都会出问题,如果你编译后第一次画没问题的肯定是被这个canvasToTempFilePath影响了,看看能不能把canvasToTempFilePath也加进promise,整个流程走完后再允许下一次绘制
      09-06
      回复
    • Yayure
      Yayure
      09-06回复💮肥宅店長.
      感觉你没理解我的意思,你这里的70、80%指的是不是数次生成了这个图片,如果你每次循环draw后直接调用canvasToTempFilePath,然后再紧接着下一次循环draw,那么我可以负责任的告诉你,再次draw出来的图片是有几率出现问题的,因为我本人碰到过,不是很清楚你那边的具体逻辑,不过相信不相信这个影响完全取决于你
      09-06
      回复
  • 邱一欢
    邱一欢
    09-05

    图片都sync完以后 一起画上去。 draw都是异步的, 调多了有时候会掉。

    如果嫌用户体验不好,就先画一个骨架, 然后sync图片, 最后一起画上去

    09-05
    赞同
    回复 2
    • 💮肥宅店長.
      💮肥宅店長.
      09-05
      由于有层级概念 所以不能一起画上去
      09-05
      回复
    • 💮肥宅店長.
      💮肥宅店長.
      09-05
      drawImage 如果不调用draw 没办法保存图片啊 上一次的绘图不会保存下来
      09-05
      回复
  • Xiushan Li
    Xiushan Li
    09-05

    回调放个setTimeout

    tempCtx.draw(true, setTimeout(() =>{resolve()},500)

    09-05
    赞同
    回复 12
    • 💮肥宅店長.
      💮肥宅店長.
      09-05
      我试试 我在画最终的边框的时候 用延时器了 画图的时候确实没用
      09-05
      回复
    • 💮肥宅店長.
      💮肥宅店長.
      09-05
      试了一下 还是偶尔会有
      09-05
      回复
    • Xiushan Li
      Xiushan Li
      09-05回复💮肥宅店長.
      这应该是canvas渲染问题,你现在的业务是做什么
      09-05
      回复
    • 💮肥宅店長.
      💮肥宅店長.
      09-05回复Xiushan Li
      模仿美图秀秀的拼图
      09-05
      回复
    • Xiushan Li
      Xiushan Li
      09-05回复💮肥宅店長.

      你可以做个替代方案,最后画完,把当前canvas保存临时图片文件,然后在页面放个image组件,作为替代展示:

      ctx.draw(true, setTimeout(() => {
                  wx.canvasToTempFilePath({
                    canvasId: '',
                    success: res => {
                      console.log(res.tempFilePath) //赋值给image组件的src
                    }
                  }, this)
                }, 500))


      09-05
      回复
    查看更多(7)
  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    09-05

    https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    按这个弄个 能复现的 代码片段 分享上了


    09-05
    赞同
    回复 8
    • 💮肥宅店長.
      💮肥宅店長.
      09-05
      我这个复现很复杂 不太好弄 带上业务逻辑的
      09-05
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      09-05回复💮肥宅店長.

      var alls = []

      for(var i in this.data.photoSrc){

      alls.push(asyncDrawImg(....))

      }

      Promise.all(alls).then(res => {

        console.log(res);

      });


      09-05
      回复
    • 💮肥宅店長.
      💮肥宅店長.
      09-05回复o0o有脾气的酸奶
      canvas 画图有层级问题 不能用promise.all 要是继发不能并发
      09-05
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      09-05回复💮肥宅店長.

      试了一下,promise.all方式和递归方式

      1.promise.all去掉clip还是可以的,

      2.递归方式,不用去点clip也可以

      代码片段

      09-05
      回复
    • 💮肥宅店長.
      💮肥宅店長.
      09-05回复o0o有脾气的酸奶
      你好 我需要图片有层级概念 互相独立不影响的 所以需要画个矩形 在里面画图片
      09-05
      回复
    查看更多(3)
  • 💮肥宅店長.
    💮肥宅店長.
    09-05

    这些canvas的api还有异步的吗 应该没有了吧

    09-05
    赞同
    回复
问题标签