项目采坑记录canvascamera 微信小程序逐帧上传

标签:项目,记录,程序,上传 发布时间:2021年04月20日 点击39

引入

项目需求:在前端使用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"

  • 解决方法:
    用来存放图片的canvas不能设置 hidden="true",所以可以行使position: absolute进行绝对定位,使得canvas离开文档流,并通过设置top和left等位置,将canvas移出视口。 此时,"create bitmap failed"错误不再发生。

采坑4

因为生成图片是个耗费性能的工作,所以理应使得传到后台的图片尽可能小,防止页面卡顿。但同时又必要将精确帧表现在页面上,这就造成了矛盾。

  • 解决方法:
    每次上传帧的同时进行拍照,若拍照返回的效果是精确的,则将拍照的本地图片进行展示。此时进行真机测试发现,无卡顿征象。
手机网站建设