收藏
回答

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

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

- 需求的场景描述(希望解决的问题)

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

- 希望提供的能力

提升小程序canvas组件性能

最后一次编辑于  2018-07-12  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    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)
  • LIVEEVIL
    LIVEEVIL
    08-22

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

    08-22
    赞同
    回复
  • kevin
    kevin
    2018-07-12

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

    2018-07-12
    赞同
    回复