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

原创

已于 2025-07-21 21:47:56 修改 · 729 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

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

前言

针对比较新的微信小程序开发库，我用的是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]