收藏
回答

canvas制作的图片有时会变形

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug 最新 最新 6.6.7

微信小程序中的canvas画出的来图片进行预览,图1是我想要的结果,但有时会出现类似图2、图3等其他不可预测的情况,并非一直出现错误的情况,只是有时会出现,这是为什么呢?






这里是代码部分:


最后一次编辑于  2018-07-19
回答关注问题邀请回答
收藏

8 个回答

  • Afan.
    Afan.
    2018-07-24

    给楼主安利一波

    https://github.com/AfanSama/esay-canvas

    2018-07-24
    有用 1
    回复 1
    • Li巴巴
      Li巴巴
      2018-07-26

      赞一个

      2018-07-26
      回复
  • 彭涛
    彭涛
    2018-07-20

    你在 draw 之后马上执行 canvasToTempFilePath 在真机上就是可能会出问题,需要加个 300ms 的 timeout 。我开了个 repo 来搜集这些坑,也许你可以关注下:https://github.com/Kujiale-Mobile/MP-Keng

    2018-07-20
    有用 1
    回复 1
    • Li巴巴
      Li巴巴
      2018-07-20

      问题初步解决;

      方案:     ctx.draw(false,function(){

              setTimeout(function(){

                  // 这里书写生成代码


              },300)


          })

      2018-07-20
      回复
  • 李乾坤David
    李乾坤David
    2018-07-23
    context.draw()
     
      setTimeout(() => {
     
         wepy.canvasToTempFilePath({
     
            canvasId: 'share_canvas',
     
            fileType: 'png'
     
          }).then((res) => {
     
            self.shareImagePath = res.tempFilePath
     
            self.saveImagePathToLocal()
     
          })
     
    }, 600)

    是这个意思 照着这个写就行了。

    2018-07-23
    有用
    回复
  • Pepsi
    Pepsi
    2018-07-20

    加个延时器即可

    2018-07-20
    有用
    回复 3
    • Li巴巴
      Li巴巴
      2018-07-20

      setTimeout(function(){生成处理},200) 你说的应该是这个意思吧?我的写法是  ctx.draw(false,function(){生成处理}) , 是在画布完成之后才生成的

      2018-07-20
      回复
    • Pepsi
      Pepsi
      2018-07-20

      画的方法执行完以后加延时器

      2018-07-20
      回复
    • 囧闵妹儿🍓
      囧闵妹儿🍓
      2021-10-26回复Li巴巴
      加了延时器也不行也 图片还是变形了
      2021-10-26
      回复
  • 虾饺烧麦
    虾饺烧麦
    2018-07-20

    导出的时候加个定时器把。应该是画布还没画完的时候,已经把图片导出来了

    2018-07-20
    有用
    回复 2
    • Li巴巴
      Li巴巴
      2018-07-20

      setTimeout(function(){生成处理},200) 你说的应该是这个意思吧? 我的写法是  ctx.draw(false,function(){生成处理}) , 是在画布完成之后才生成的

      2018-07-20
      回复
    • 虾饺烧麦
      虾饺烧麦
      2018-07-20

      你直接1500能不能。

      2018-07-20
      回复
  • 是柿子啊
    是柿子啊
    2018-07-19

    麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题

    2018-07-19
    有用
    回复 1
    • Li巴巴
      Li巴巴
      2018-07-19

      这样跟您说吧,这些问题都是出现在线上版本,在IDE或者通过手机进行预览时斗都不能看出问题,您感觉生成代码片段之后可以发现问题吗? 在我的代码中使用了几次  ctx.save()与ctx.restore(),不知道根据您的经验,这类问题于此有关吗?

      2018-07-19
      回复
  • Noah's Ark
    Noah's Ark
    2018-07-19

    代码看看啊

    2018-07-19
    有用
    回复 3
    • Li巴巴
      Li巴巴
      2018-07-19

      好的  稍等


      2018-07-19
      回复
    • Li巴巴
      Li巴巴
      2018-07-19

      代码已经以图片的形式更新到问题当中了,欢迎指正

      2018-07-19
      回复
    • Noah's Ark
      Noah's Ark
      2018-07-19回复Li巴巴

      来个代码片段吧  光看代码没看出来

      2018-07-19
      回复
  • Li巴巴
    Li巴巴
    2018-07-19

    大佬们,不要让我的帖子沉了啊

    2018-07-19
    有用
    回复 1
    •  
       
      2020-04-28
      现在好了吗
      2020-04-28
      回复
登录 后发表内容