[项目采坑记录][canvas][camera] 微信小程序逐帧上传

引入

项目需求：在前端使用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
  
  
  //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

由于生成图片是个耗费性能的工作，所以理应使得传到后台的图片尽可能小，防止页面卡顿。但同时又需要将正确帧显示在页面上，这就造成了矛盾。

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