0

このリンクに示されている写真のような結果を得るために、2 つの ImageData オブジェクトを 1 つのオブジェクトにブレンドしようとしています。

以下は、2 つの ImageData を持つ Javascript コードです。

var redImage = copy.getImageData((SCREEN_WIDTH - VIDEO_WIDTH)/2,(SCREEN_HEIGHT - VIDEO_HEIGHT)/2,VIDEO_WIDTH,VIDEO_HEIGHT);
var bluImage = copy.getImageData((SCREEN_WIDTH - VIDEO_WIDTH)/2,(SCREEN_HEIGHT - VIDEO_HEIGHT)/2,VIDEO_WIDTH,VIDEO_HEIGHT);
var redData = redImage.data;
var blueData = blueImage.data;

// Colorize red
for(var i = 0; i < redData.length; i+=4) {
    redData[i] -= (redData[i] - 255);
}
redImage.data = redData;

// Draw the pixels onto the visible canvas
disp.putImageData(redImage,(SCREEN_WIDTH - VIDEO_WIDTH)/2 - 25,(SCREEN_HEIGHT - VIDEO_HEIGHT)/2);

// Colorize cyan
for(var i = 1; i < blueData.length; i+=4) {
    blueData[i] -= (blueData[i] - 255);
    blueData[i+1] -= (blueData[i+1] - 255);
}
blueImage.data = blueData;

// Draw the pixels onto the visible canvas
disp.putImageData(blueImage,(SCREEN_WIDTH - VIDEO_WIDTH)/2 + 25,(SCREEN_HEIGHT - VIDEO_HEIGHT)/2);

キャンバスに配置する前に redData と blueData をマージ/ブレンドするにはどうすればよいですか?

4

3 に答える 3

3

2 つの画像を混合するために使用できる式は非常に単純です。

newPixel = imageMainPixel * mixFactor + imageSecPixel * (1 - mixFactor)

両方のバッファの長さが等しいと仮定した例:

var mixFactor = 0.5; //main image is dominant

//we're using the red buffer as main buffer for this example
for(var i = 0; i < redData.length; i+=4) {
    redData[i]   = redData[i]   * mixFactor + blueData[i]   * (1 - mixFactor);
    redData[i+1] = redData[i+1] * mixFactor + blueData[i+1] * (1 - mixFactor);
    redData[i+2] = redData[i+2] * mixFactor + blueData[i+2] * (1 - mixFactor);
}

これで、赤いバッファーに混合画像が含まれます。

オフセットを追加するには、オフセット値を使用して画像を再描画するだけです。次に例を示します。

var offset = 20; //pixels

copy.drawImage(originalImage, -offset, 0);  // <--
var redImage = copy.getImageData( /*...*/ );

copy.drawImage(originalImage, offset, 0);   // -->
var bluImage = copy.getImageData( /*...*/ );
于 2013-06-22T21:40:18.093 に答える
0

送信フォーマット 3d を設定する機能についてはどうですか? フル サイド バイ サイド バイ サイドからアナグリフ、交互行、交互列、チェス盤、オリジナルのサイド バイ サイド、および 3d からの 2d ?

于 2013-07-18T15:48:57.093 に答える