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

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