画布 getImageData 到 RGB 值答案

【问题标题】：Canvas getImageData to RGB Values画布 getImageData 到 RGB 值
【发布时间】：2017-12-15 14:24:35
【问题描述】：

我目前正在做以下事情：

从画布中，我使用getImageData 函数获得50x50px 字段作为像素数据。

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

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

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

现在的问题是，我如何才能以这种格式获取我的ImageData，以便将其通过管道传输到 FFMPEG？

【问题讨论】：

标签： javascript canvas ffmpeg

【解决方案1】：

查看getImageData here 的文档。

会发生什么情况是你得到一个带有data 属性的ImageData 对象，其中包含一个大数组。对于每个像素，数组中有四个条目，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 值一起移动

很确定这应该可以工作

【讨论】：

感谢您的快速回答，看起来不错，对不起，我可以在明天之前尝试一下，但我会回复它。
之前可以测试过，我得到的值是 11261927，这是当时的 rgb 值。但有些事情似乎不对，1. 只有 8 位数字而不是 9，而且我似乎找不到任何合理的解释来解释上面的 9（在那个位置）
那是因为不是每个 rgb 值都有 3 位数字......所以移位也是错误的......
号码长度不固定。想象一下，如果你的 RGB 为(0, 0, 0)。那么整数的值就是0。它可以变化。另外，你用什么值测试它？
我认为您误解了包装的工作原理。如果我的 RGB 为 (1, 1, 1)，则 RGB24 不会是 001001001，尽管它看起来很直观。如果我们这样表达，我们将拥有的最大数字是255255255，它是 9 位长并且非常低效。从数学的角度来看，我们可以拥有的三个 1 字节数的数量是 256^3，也就是16777215，比255255255 少了很多。这就是我们打包的原因 - 这样计算机可以更有效地存储号码

【解决方案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++;
}

【讨论】：