微信小程序canvas上传PHP,[项目采坑记录][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

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

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