Blending two ImageData into one ImageData with an offset in Javascript

admin

Administrator
Staff member
I'm trying to blend two ImageData objects into a single object in order to obtain result similar to the pictures shown in this <a href="http://cranklin.wordpress.com/2011/12/20/convert-your-pictures-to-3d/" rel="nofollow">link</a>

The following is the Javascript code that has the two ImageData

Code:
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 &lt; 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 &lt; 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);

How do i merge/blend the redData and blueData before putting it on the canvas ?