引入

項目需求：在前端使用camera組件持續(xù)掃描，將捕捉到的幀上傳到后端進行算法識別判斷，并返回判斷結(jié)果。若結(jié)果為“成功”，則將捕捉到的正確幀顯示在屏幕上。

嘗試

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

wx.onCameraFrameAPI接受一個回調(diào)函數(shù)，返回frame的寬高和frame的圖像編碼（ArrayBuffer格式）

嘗試（一）

經(jīng)過查找，wx.arrayBufferToBase64API，可以實現(xiàn)arraybuffer到Base64的轉(zhuǎn)換，但實際使用的過程中發(fā)現(xiàn)處理速度極其緩慢，并且對手機性能消耗太大，不滿足實時性的需求

嘗試（二）

后來發(fā)現(xiàn)了將arrayBuffer畫到canvas上，再將canvas畫布的圖片導(dǎo)出為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

• 解決方法：
  在函數(shù)開頭定義變量that指向this，并使用that綁定

  //html
  //js
  onReady(){
      const that = this
      wx.canvasPutImageData({ 
          canvasId: 'myCanvas'
          ...
      },that)
  }

采坑3

wx.canvasToTempFilePath報錯："create bitmap failed"

• 解決方法：
  用來存放圖片的canvas不能設(shè)置 hidden="true"，所以可以利用position: absolute進行絕對定位，使得canvas脫離文檔流，并通過設(shè)置top和left等位置，將canvas移出視口。 此時，"create bitmap failed"錯誤不再發(fā)生。

采坑4

由于生成圖片是個耗費性能的工作，所以理應(yīng)使得傳到后臺的圖片盡可能小，防止頁面卡頓。但同時又需要將正確幀顯示在頁面上，這就造成了矛盾。

• 解決方法：
  每次上傳幀的同時進行拍照，若拍照返回的結(jié)果是正確的，則將拍照的本地圖片進行展示。此時進行真機測試發(fā)現(xiàn)，無卡頓現(xiàn)象。