[项目采坑记录][canvas][camera] 微信小程序逐帧上传
码农天地 -引入
项目需求:在前端使用camera
组件持续扫描,将捕捉到的帧上传到后端进行算法识别判断,并返回判断结果。若结果为“成功”,则将捕捉到的正确帧显示在屏幕上。
wx.onCameraFrame(frame=>{
//frame.width
//frame.height
//frame.data
})
wx.onCameraFrame
API接受一个回调函数,返回frame的宽高和frame的图像编码(ArrayBuffer格式)
经过查找,wx.arrayBufferToBase64
API,可以实现arraybuffer到Base64的转换,但实际使用的过程中发现处理速度极其缓慢,并且对手机性能消耗太大,不满足实时性的需求
后来发现了将arrayBuffer画到canvas上,再将canvas画布的图片导出为base64的方式,遂进行了尝试。
wx.canvasPutImageData
wx.canvasToTempFilePath
wx.getFileSystemManager()
采坑1frame.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) { ... }
}
采坑2fail canvas is empty
canvasPutImageData
未绑定this解决方法:
在函数开头定义变量that
指向this,并使用that绑定
//html
<canvas canvas-id="myCanvas"></canvas>
//js
onReady(){
const that = this
wx.canvasPutImageData({
canvasId: 'myCanvas'
...
},that)
}
采坑3wx.canvasToTempFilePath
报错:"create bitmap failed"
在csdn中得到了解答:https://blog.csdn.net/txyzqc/...
用来存放图片的canvas不能设置
hidden="true"
,所以可以利用position: absolute
进行绝对定位,使得canvas脱离文档流,并通过设置top和left等位置,将canvas移出视口。 此时,"create bitmap failed"错误不再发生。采坑4由于生成图片是个耗费性能的工作,所以理应使得传到后台的图片尽可能小,防止页面卡顿。但同时又需要将正确帧显示在页面上,这就造成了矛盾。
解决方法:每次上传帧的同时进行拍照,若拍照返回的结果是正确的,则将拍照的本地图片进行展示。此时进行真机测试发现,无卡顿现象。
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。