【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片？

合集 - 一步步开发AI运动小程序(24)

1.【一步步开发AI运动小程序】一、准备工作2023-05-182. 【一步步开发AI运动小程序】二、引入插件2023-05-183.【一步步开发AI运动小程序】三、运动识别处理流程2023-05-194.【一步步开发AI运动小程序】四、小程序如何抽帧2023-05-195.【一步步开发AI运动小程序】五、帧图像人体识别2023-05-236.【一步步开发AI运动小程序】六、人体骨骼图绘制2023-05-247.【一步步开发AI运动小程序】七、进行运动计时、计数2023-05-258.【一步步开发AI运动小程序】八、利用body-calc进行姿态识别2023-05-269.【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用2023-05-2910.【一步步开发AI运动小程序】十、姿态动作相似度比较2023-05-3111.【一步步开发AI运动小程序】十一、人体关键点跳跃追踪2023-06-0512.【一步步开发AI运动小程序】十二、自定义一个运动分析器，实现计时计数012023-06-1613.【一步步开发AI运动小程序】十三、自定义一个运动分析器，实现计时计数022023-07-1014.【一步步开发AI运动小程序】十四、主包超出2M大小限制，如何将插件分包发布？2023-12-2015.【一步步开发AI运动小程序】十五、AI运动识别中，如何判断人体站位的远近？2023-12-2516.【一步步开发AI运动小程序】十六、AI运动识别中，如何判断人体站位？2023-12-2817.【一步步开发AI运动小程序】十八、如何识别用户上传图片中的人体、运动、动作、姿态？2024-05-2818.【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态？2024-05-20

19.【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片？2024-07-09

20.【一步步开发AI运动小程序】二十、AI运动小程序如何适配相机全屏模式？2024-10-0921.AI运动小程序开发常见问题集锦一2024-09-1922.AI运动小程序开发常见问题集锦二2024-11-0523.【更新日志】新发布的1.5.0版本插件中的增强模式，作用几何？2024-03-2624.【一步步开发AI运动小程序】二十一、如果将AI运动项目配置持久化到后端？2024-11-11

收起

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

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