混合兩個的ImageData成一個的ImageData與在Javascript

偏移

我試圖混合兩個的ImageData對象到一個單一的對象，以獲得類似於本link 混合兩個的ImageData成一個的ImageData與在Javascript

以下所示的畫面結果是Javascript代碼有兩個ImageData

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之前把它放在畫布上？

來源

2013-06-22 Vidhuran

可以使用混合兩個圖像的公式是相當簡單：

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-22 21:40:18 K3N

這將兩個圖像混合一到一個，但我需要具有的說這兩個圖像之間的50個像素的偏移量。我可以做這樣的代碼嗎（'var mixFactor = 0.5; //主圖像佔優勢 //我們使用紅色緩衝區作爲這個例子的主緩衝區（var i = 0; i Vidhuran

@Vidhuran混合相同的圖像只有偏移差異不會給你3D。您需要拍攝兩張*圖像，並略有偏移（通常相隔5-7釐米，鏡頭指向相同方向）。當你混合這兩個圖像時，你會得到一個3D效果。除非3D不是你想要的？如果你只是在混合前使用'ctx.drawImage（canvas，offset，0）'到同一個畫布。 – K3N

至少根據我在問題中發佈的鏈接，通過合併相同的圖像和偏移量，可以實現輕微的「彈出」/「彈出」效果。 – Vidhuran

怎麼樣設置傳輸格式的3D功能 - 通過側格式全一側浮雕，交替行，交替的列，棋盤，原來的並排和2D從3D？

來源

2013-07-18 15:48:57 alexey

如果您不僅有ImageData對象，而且還有源canvas元素，則可以使用此方法。

您可以通過調用toDataURL畫布方法獲得base64編碼的圖像數據。然後，您可以從該數據創建Image元素，然後通過drawImage將該圖像粘貼到目標畫布。

示例代碼：

function mergeImageData(callback, sources) { 
    var canvas = document.createElement('canvas'), 
     context, 
     images = Array.prototype.slice.call(arguments, 1).map(function(canvas) { 
       var img = new Image(); 
       img.onload = onLoad; 
       img.src = canvas.toDataURL(); 
       return img; 
      } 
     ), 
     imgCounter = 0, 
     widths = [], 
     heights = []; 

    function onLoad() { 
     widths.push(this.width); 
     heights.push(this.height); 

     if (++imgCounter == images.length) { 
      merge(); 
     }; 
    }; 
    function merge() { 
     canvas.width = Math.max.apply(null, widths); 
     canvas.height = Math.max.apply(null, heights); 
     context = canvas.getContext('2d'); 

     images.forEach(function(img) { 
       context.drawImage(img, 0, 0, img.width, img.height); 
      } 
     ); 

     callback(context.getImageData(0, 0, canvas.width, canvas.height)); 
    }; 
};

來源

2013-10-11 14:09:47 user1444978

我有完全相同的問題，需要合併2+層（保存爲一個單一的PNG），我喜歡這種方法親自 –

混合兩個的ImageData成一個的ImageData與在Javascript

回答

相關問題