关于javascript:项目采坑记录canvascamera-微信小程序逐帧上传

引入

我的项目需要：在前端应用 camera 组件继续扫描，将捕捉到的帧上传到后端进行算法辨认判断，并返回判断后果。若后果为“胜利”，则将捕捉到的正确帧显示在屏幕上。

尝试

wx.onCameraFrame(frame=>{
    //frame.width
    //frame.height
    //frame.data
})

wx.onCameraFrameAPI 承受一个回调函数，返回 frame 的宽高和 frame 的图像编码（ArrayBuffer 格局）

尝试（一）

通过查找，wx.arrayBufferToBase64API，能够实现 arraybuffer 到 Base64 的转换，但理论应用的过程中发现处理速度极其迟缓，并且对手机性能耗费太大，不满足实时性的需要

尝试（二）

起初发现了将 arrayBuffer 画到 canvas 上，再将 canvas 画布的图片导出为 base64 的形式，遂进行了尝试。

• wx.canvasPutImageData
• wx.canvasToTempFilePath
• wx.getFileSystemManager()

采坑 1

frame.data的格局为ArrayBuffer，不能间接上传，须要进行如下解决：

var data = new Uint8Array(frame.data);
var clamped = new Uint8ClampedArray(data);


 wx.canvasPutImageData({
          canvasId: 'getImg',
          x: 0,
          y: 0,
          width: frame.width,
          height: frame.height,
          data: clamped,
          success(res) {...},
          fail(err) {...}
}

采坑 2

fail canvas is empty

• 问题：
  canvasPutImageData未绑定 this

• 解决办法：
  在函数结尾定义变量 that 指向 this，并应用 that 绑定

  //html
  <canvas canvas-id="myCanvas"></canvas>
  
  //js
  onReady(){
      const that = this
      wx.canvasPutImageData({ 
          canvasId: 'myCanvas'
          ...
      },that)
  }

采坑 3

wx.canvasToTempFilePath报错：”create bitmap failed”
在 csdn 中失去了解答：https://blog.csdn.net/txyzqc/…

• 解决办法：
  用来寄存图片的 canvas 不能设置 hidden="true"，所以能够利用 position: absolute 进行相对定位，使得 canvas 脱离文档流，并通过设置 top 和 left 等地位，将 canvas 移出视口。此时，”create bitmap failed” 谬误不再产生。

采坑 4

因为生成图片是个消耗性能的工作，所以理当使得传到后盾的图片尽可能小，避免页面卡顿。但同时又须要将正确帧显示在页面上，这就造成了矛盾。

• 解决办法：
  每次上传帧的同时进行拍照，若拍照返回的后果是正确的，则将拍照的本地图片进行展现。此时进行真机测试发现，无卡顿景象。