收藏
回答

如何将camera的图像绘制到canvas?

为什么camera通过CameraFrameListener拿到的实时帧数据无法通过canvas的drawImage绘制到canvas呢?是需要转换数据格式吗?也不报错也不显示图片,和我通过本地图片绘制的效果一样,都绘制不出来


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

3 个回答

  • 晚安伊芙琳_c
    晚安伊芙琳_c
    2022-04-28
            this.canvas = await this.getCanvasEl('mycanvas')
            this.ctx = this.canvas.getContext('2d')
    let listen = this.camera.onCameraFrame((frame) => {
                if (this.count < 10) console.log(frame)
                this.count++
                this.canvas.width = frame.width
                this.canvas.height = frame.height
                let data = new Uint8Array(frame.data);
                let clamped = new Uint8ClampedArray(data);
                for(let i =0;i<clamped.length;i+=4){
                    clamped[i] = clamped[i]+100
                    clamped[i+1] = clamped[i+1]+50
                    clamped[i+2] = clamped[i+2]+50
                    clamped[i+3] = clamped[i+3]+50
                }
                let imageData = this.canvas.createImageData(clamped, frame.width, frame.height);
                this.ctx.putImageData(imageData, 0000, frame.width, frame.height);
            })
            listen.start()
    
    2022-04-28
    有用 1
    回复 1
  • 本末
    本末
    2023-03-29
    Page({
      onReady: function () {
        wx.createSelectorQuery().select("#myCanvas").fields({
          node: true,
          size: true
        }).exec((res) => {
          const canvas = res[0].node;
          this.canvas = canvas
          this.ctx = canvas.getContext("2d")
        });
        this.drawCamera()
      },
      drawCamera: function () {
        const camera = wx.createCameraContext()
        this.count = 0
        const cameraListener = camera.onCameraFrame((frame) => {
          if (this.count < 10) console.log(frame)
          this.count++
          this.canvas.width = frame.width
          this.canvas.height = frame.height
          let data = new Uint8Array(frame.data);
          let clamped = new Uint8ClampedArray(data);
          let imageData = this.canvas.createImageData(clamped, frame.width, frame.height);
          this.ctx.putImageData(imageData, 0, 0, 0, 0, frame.width, frame.height);
        })
        cameraListener.start()
      }
    })
    
    2023-03-29
    有用
    回复 1
    • 本末
      本末
      2023-03-29
      画出来的图 有点失真
      2023-03-29
      回复
  • Feng
    Feng
    2021-12-15

    你好,你这个问题解决了吗

    2021-12-15
    有用
    回复
登录 后发表内容