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

10次阅读

共计 1268 个字符，预计需要花费 4 分钟才能阅读完成。

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

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) {...}
}

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)
}

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

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

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