javascript - 将getImageData Canvas 为RGB值

我目前正在执行以下操作：

从画布上，我通过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？

最佳答案

查看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中

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

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

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

相当确定这应该工作