收藏
回答

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



70% -80%时候是好的

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

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

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






补充:

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



补充:

感谢 Xiushan Li 的解答


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

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

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




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

6 个回答

  • 禾店短剧系统
    禾店短剧系统
    2021-06-11

    通常就是没load得原因

    1. let arr = ['img1','img2','img3'];

    2. let Canvas = document.createElement('canvas');

    3. ctx = Canvas.getContext("2d");

    4. let {W, H} = {100, 200};

    5. let scaleBy = 2;

    6. arr.forEach(e => {

    7. let bgImg = document.creatElement('img');

    8. bgImg.src = e;

    9. bgImg.onload = () => {

    10. ctx.drawImage(bgImg, 0, 0, W * scaleBy, H * scaleBy);


    11. let newImg = document.createElement('img');

    12. newImg.src = Canvas.toDataURL();

    13. document.body.appendChild(newImg);

    14. }

    15. })


    2021-06-11
    有用 1
    回复
  • 2019-09-06

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

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

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

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

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

    回调放个setTimeout

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

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

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

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


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

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

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


    2019-09-05
    有用
    回复 8
    查看更多(3)
  • 💮店長推薦.
    💮店長推薦.
    2019-09-05

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

    2019-09-05
    有用
    回复
登录 后发表内容
问题标签