【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片?
引言 最近有不少开发者向我们咨询,像体测、赛事等应用场景中,需要保存运动过程的图像,如何将相机抽取的RGBA帧图像解析成
.jpg
或.png
格式的图像?今天我们就为您介绍相应的解决方案。
一、RGBA图像结构。
RGBA图像为一维数组,每四个元素描写一个图像像素,前三元素为颜色值,第四个元素为透明度值,按列扫描顺序分布,如下图所示,为一个宽2px、高3px的结果,如下图所示:
二、相关API。
根据上面的图像结构,我们把相应的像素点在canvas上画出来即可。为了减少绘制时对界面的干扰,我们使用uni.createOffsetScreen()创建离屏画布绘制。
三、代码实现。
实现代码如下,抽帧代码见前面的抽帧章节。
...
onCameraReady(e) {
const context = wx.createCameraContext();
const listener = context.onCameraFrame(frame => {
this.parseToJpeg(frame);
});
listener.start();
}
parseToJpeg(){
const canvas = uni.createOffscreenCanvas({
width: frame.width,
height: frame.height,
type: '2d'
});
let offset = 0;
let gl = canvas.getContext('2d');
const buffer = frame.data;
for (let y = 0; y < frame.height; y++) {
for (let x = 0; x < frame.width; x++) {
let r = buffer[offset].toString(16).padStart(2, '0');
let g = buffer[offset + 1].toString(16).padStart(2, '0');
let b = buffer[offset + 2].toString(16).padStart(2, '0');
let a = buffer[offset + 3].toString(16).padStart(2, '0');
let color = `#${r}${g}${b}${a}`;
//console.log(color, offset);
gl.fillStyle = color;
gl.fillRect(x, y, 1, 1);
offset += 4;
}
}
}
...
四、后记
4.1、为什么不直接使用拍照API?
这主要出于两个原因,一是在抽帧的同时无法调用
CameraContext.takePhoto()
API进行拍照; 二是由于抽帧是异步的,所以无法同步调用,可能会导致识别时机的图像与拍摄的一不致。
4.2、图像转换调用频率。
由于图像转换是比较消耗计算资源的,所以建议不要在抽帧时同步调用图像转换,建议先暂存要转换的帧,等运动结束是再进行转换、上传等操作。
![](https://img2020.cnblogs.com/blog/115969/202104/115969-20210411213756337-1017388153.jpg)
提供信息系统、公众号、小程序、APP订制开发服务
QQ:316455841
欢迎通过各种渠道咨询了解,免费提供信息系统建设咨询服务。