キャンバスgetImageDataは、私は現在、次のやってる

Question

値。

私が何をしたいのか

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

getImageDatahereのドキュメントをご覧ください。

大きな配列を含むdata属性を持つImageDataオブジェクトが得られます。すべてのピクセルについて、配列内には、r,g,b、およびalphaの4つのエントリがあります。配列は[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約100％わからないんだけど、私はそれは、各R/G/Bを意味し、各エンティティが24ビットである意味かなり確信していますそれぞれ1バイトありますが、それはすでに値の範囲であるためです。今すぐ梱包するだけです。

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

このコードは、1で2バイト、緑に赤シフトし、その後、or値が一緒に

はかなり確信してこれを使用すると、バイトのフラットな配列を必要とするよう

Answer 2

は、まあ、それは見えます動作するはずです。

JavaScriptは24ビットワードをしません。そのため、バイト配列に変換してアルファチャンネルをスキップするだけです。

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