微信小程序3.3.5 实时帧数据绘制到canvas再转png；base64

supermodule

已于 2024-04-05 20:54:27 修改

阅读量445

点赞数 3

分类专栏：网页设计文章标签：微信小程序小程序

于 2024-04-01 08:14:17 首次发布

本文链接：https://blog.csdn.net/supermodule/article/details/137216911

版权

网页设计专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

针对比较新的微信小程序开发库，我用的是3.3.5

代码

Page({

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    // 获取camera上下文
    const context = wx.createCameraContext();
    // 定义监听帧数据回调函数
    const CamFramCall = (frame)=>{
      // 选择画布对象
      const query = wx.createSelectorQuery()
      // 画布ID为“mycanvas”
      query.select('#mycanvas')
        .fields({node:true,size:true})
        .exec((res)=>{
          const canvas=res[0].node
          const ctx=canvas.getContext('2d')
          // 根据实时帧宽高设置canvas宽高
          canvas.width=frame.width
          canvas.height=frame.height
          // 创建用于填充画布的imageData对象
          var imageData=ctx.createImageData(canvas.width,canvas.height)
          // 将原始帧数据格式转Uint8ClampedArray
          var ImgU8Array = new Uint8ClampedArray(frame.data);
          // 把原始帧数据写入imageData对象
          for(var i=0;i<ImgU8Array.length;i+=4){
            imageData.data[0+i]=ImgU8Array[i+0]
            imageData.data[1+i]=ImgU8Array[i+1]
            imageData.data[2+i]=ImgU8Array[i+2]
            imageData.data[3+i]=ImgU8Array[i+3]
          }
          // 把imageData绘制到canvas中
          ctx.putImageData(imageData,0,0,0,0,canvas.width,canvas.height)
          定义base64Data，用于存储实时帧的数据
          var base64Data=canvas.toDataURL()
          // 打印到控制台
          console.log(base64Data)
        })
      // 关闭监听
      listener.stop()
    }
    // 设置监听回调函数
    const listener = context.onCameraFrame(CamFramCall);
    // 开启监听
    listener.start()
  },

})

注意在wxml中加上这行代码

<canvas id="mycanvas" type="2d"></canvas>