Javascript 画布将getImageData转换为RGB值

我目前正在做以下工作：

通过

getImageData

函数，我从画布上获得一个

50x50px

字段作为像素数据

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

我想做的是，将此数据发送到FFMMPEG，将其作为视频放在一起，FFMPEG希望RGB24具有以下特性：

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

AV_PIX_FMT_RGB24，//

---

现在的问题是，如何以这种格式获取我的

ImageData

，以便将其导入FFMPEG？

查看

getImageData

的文档

发生的情况是，您得到一个

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]])
}

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

---

非常确定这应该能用

看起来你需要一个扁平的字节数组

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++;
}

const rgb24=新的Uint8Array（（imageData.data.length/4）*3）；
var i=0；
var j=0；
while（i

谢谢你的快速回答，看起来不错，请原谅，我明天才可以尝试，但之后我会继续。如果之前能够测试它，我会得到11261927这样的值，这是当时的rgb值。但是有些事情似乎不对，1。它只有8位而不是9位，我似乎找不到任何合理的解释来解释它上面的9位（在那个位置），因为不是每个rgb值都有3位。。那么移位也是错误的……数字的长度不是固定的。想象一下，如果您的RGB为

（0,0,0）

。那么整数的值将是

0

。它可以变化。还有，你用什么值来测试它？我想你误解了包装的工作原理。如果我的RGB为（1，1，1），RGB24将不会是

001001001

，尽管它看起来很直观。如果我们这样表达的话，我们得到的最大数字是

255255

，它是9位数，效率非常低。从数学角度来看，我们可以拥有的三个1字节数字的数量是256^3，这是

16777215

，比

255255

少得多。这就是我们打包的原因——这样计算机可以更有效地存储数字

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++;
}