公告列表
公告列表
收藏
回答

小程序canvas组件绘制原图时出现明显卡顿，官方是否考虑过提升canvas性能

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 需求 canvas 客户端 6.6.7.1321 2.1.3

- 需求的场景描述（希望解决的问题）

目前在canvas组件中编辑图片（移动，放大，旋转），如果选择原图（3-4mb大小），在绘制过程中出现明显的卡顿现象，基本不能使用，选择压缩图则绘制流畅

- 希望提供的能力

提升小程序canvas组件性能

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

3 个回答

  • 2019-08-22

    官方的常规操作就是，代码片段、然后。。。。。

    2019-08-22
    有用 1
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-07-12

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

    2018-07-12
    有用
    回复 8
    • 木剑温小二
      木剑温小二
      2018-07-12
      touchMove: function(e){
              if (e.type === 'touchmove') {
                that.data.testX += parseInt(e.deltaX)
                that.data.testY += parseInt(e.deltaY)
                that.data.ctx.drawImage(that.data.imgUrl, that.data.testX, that.data.testY, that.data.drawWidth, that.data.drawHeight)
                that.data.ctx.draw(false)
              }
            },

      就是手指触摸滑动重绘，选择原图就很卡基本用不了，我测试的图片是4mb的图片，使用缩略图就很流畅，这个应该是小程序canvas本身性能问题吧，h5 canvas就很流畅

      2018-07-12
      赞
      回复
    • 木剑温小二
      木剑温小二
      2018-07-12

      @  小辣椒  我还发现一个问题，当我选择原图时touchmove触发的时间间隔在200ms左右，选择缩略图时touchmove触发时间很短能保证60帧，这是否是一个bug？

      2018-07-12
      赞
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2018-07-12回复木剑温小二

      能否给个完整的复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）？

      2018-07-12
      赞
      回复
    • 木剑温小二
      木剑温小二
      2018-07-13回复疯狂的小辣椒

      链接：wechatide://minicode/aB416Smp7mBx，同样一张图片绘制压缩图和绘制原图的touchmove间隔差距明显

      2018-07-13
      赞
      回复
    • 木剑温小二
      木剑温小二
      2018-07-13回复疯狂的小辣椒

      需要真机测试，我测试机是mix2s

      2018-07-13
      赞
      回复
    查看更多(3)
  • kevin
    kevin
    2018-07-12

    嗯，同样的问题，放大移动会有卡顿

    2018-07-12
    有用
    回复
请 登录 后发表内容
相关问题
相关文档