十九、运动识别中如何解析RGBA帧图片？

原创

alphaair

发布于 2024-07-09 14:25:44

760

发布于 2024-07-09 14:25:44

文章被收录于专栏：一步一步开发AI运动小程序

引言最近有不少开发者向我们咨询，像体测、赛事等应用场景中，需要保存运动过程的图像，如何将相机抽取的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;
		}
	}
}
...