Question

我目前正在做以下事情：

从画布我得到一个50x50px字段作为带有getImageData功能的像素数据。

var imageData = ctx.getImageData(0,0,50,50)

我想要做的是将此数据发送到FFMMPEG以将其作为视频放在一起，FFMPEG期望RGB24的以下内容：

AV_PIX_FMT_RGB24,     ///< packed RGB 8:8:8, 24bpp, RGBRGB...

现在的问题是，如何以这种格式获取ImageData，以便将其输入FFMPEG？

Answer 1

查看getImageData here的文档。

如果您获得包含大数组的ImageData属性的data对象，会发生什么？对于每个像素，数组中有四个条目r，g，b和alpha。所以数组看起来像[pixel1R, pixel1G, pixel1B, pixel1Alpha, ..., pixelNR, pixelNG, pixelNB, pixelNAlpha]。

首先，我们希望将所有内容都变成RGB格式。

dataArray = imageData.data
rgbArray = []
for (var i = 0; i < dataArray.length; i+=4) {
    rgbArray.push([dataArray[i], dataArray[i+1], dataArray[i+2]])
}

现在所有内容都存储在rgbArray

中

我不是100％肯定RGB24，但我很确定这意味着每个实体都有24位，这意味着每个R / G / B每个都有一个字节，这很好，因为已经价值观的范围是什么。现在我们只需要打包它们。

rgb24Array = rgbArray.map(function(rgbList){
    return (rgbList[0] << 16) | (rgbList[1] << 8) | (rgbList[2])
})

该代码将红色移动两个字节，绿色移一，然后or值一起移动

非常确定这应该有效

Answer 2

看起来你需要平坦的字节数组。

Javascript不会执行24位字，因此您必须将其转换为字节数组并跳过Alpha通道。

const rgb24 = new Uint8Array((imageData.data.length / 4) * 3);
var i = 0;
var j = 0;
while( i < imageData.data.length){
    rgb24[j++] = imageData.data[i++];
    rgb24[j++] = imageData.data[i++];
    rgb24[j++] = imageData.data[i++];
    i++;
}

Canvas getImageData到RGB值

2 个答案: