【一步步开发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、图像转换调用频率。

由于图像转换是比较消耗计算资源的，所以建议不要在抽帧时同步调用图像转换，建议先暂存要转换的帧，等运动结束是再进行转换、上传等操作。