引入

我的项目需要：在前端应用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>//jsonReady(){    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

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

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