微信小程序中使用canvas 卡顿问题

需求: 微信小程序中生成二维码,不可对二维码进行截图(截图的时候页面提示),

//在onLoad 中监听手机的截屏动作,同时控制页面显示
onLoad(){
    //二维码下面显示实时时间
      this.time = utils.showTime(new Date());
      setInterval(() => {
        this.time = utils.showTime(new Date());
      }, 1000)

    //在onLoad 中监听手机的截屏动作
    //noScreenshot 控制页面切换的数据
      let that = this;
      wx.onUserCaptureScreen(function (res) {
        that.noScreenshot = false;
        setTimeout(() => {
          that.noScreenshot = true;
        }, 3000);
      })
    },
    
// 问题:
// 不可以使用v-if 进行页面状态的切换,v-if为false时dom元素直接销毁,当切换为true的时候,canvas是没有重建的,会显示为空白,这里规避可以使用v-show 来处理canvas的显示,这里还将提示页面的定位层级加高了,忘记这里的处理是否是因为v-show为false的时候canvas没有隐藏的原因了,后面使用的时候可以验证一下

//问题总结:canvas 在绘制的过程中使用的全部都是CPU,没有使用GPU硬件加速,导致绘制很慢出现卡顿的情况,
//这里的需求是一个申请可以邀请多个人,用户二维码下面会显示当前已经认证的同伴人数和基本信息,可以折叠,在折叠的过程中,页面尺寸变化时,canvas的位置出现卡顿,
//wxml
 <view >
      <canvas  canvasId='qrcode'></canvas>
      <image :src="loadImagePath"></image>
 </view>
 
 //js
 //生成canvas 实例
  drawQrcode({
    width: 140,
    height: 140,
    canvasId: 'qrcode',
    _this: this.$scope,
    text: applyUserInfo.visitor_code
  });

//生成实例之后将其转化为img,将url复制给wxml中的image 标签
  let that = this;
  setTimeout(function () {
    wx.canvasToTempFilePath({
      width: 140,
      height: 140,
      canvasId: 'qrcode',
      success: function (res) {
        var tempFilePath = res.tempFilePath;
        that.loadImagePath = tempFilePath;
      },
      fail: function (res) {
        console.log(res);
      }
    });
  }, 500);//时间需要调整,确保是canvas context 已经生成
  
  //这里需要注意的是wxml中其实是将canvas位置定位到页面看不到的位置,显示的二维码其实是依赖二维码生成的图片,

Tags 标签

扩展阅读

加个好友，技术交流