Blending two ImageData into one ImageData with an offset in Javascript

Question

I'm trying to blend two ImageData objects into a single object in order to obtain result similar to the pictures shown in this link

The following is the Javascript code that has the two 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);

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

score 3 · Accepted Answer · 2013-06-23T09:34:12.543

3

The formula you can use to mix two images is fairly simple:

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

Example assuming both buffers are of equal length:

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

Now your red buffer contains the mixed image.

To add an offset you can simply redraw the images with an offset value, for example:

var offset = 20; //pixels

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

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

edited Jun 23 '13 at 09:34

answered Jun 22 '13 at 21:40

This will mix the two images one-to-one , but i need to have an offset of say 50 pixels between the two images. Could i do something like this code(`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; redData[i+1] = redData[i+1] * mixFactor; redData[i+2] = redData[i+2] * mixFactor; }`) – Vidhuran Jun 23 '13 at 07:32
@Vidhuran Mixing the same image with just an offset difference won't give you 3D. You'll need to take *two* images with a slight offset (usually 5-7 cm apart and lens pointing in the same direction). When you mix these two images you will get a 3D effect. Unless 3D is not what you want..? Which in case you just use `ctx.drawImage(canvas, offset, 0)` to the same canvas before mixing them. – Jun 23 '13 at 07:40
atleast according to the link that i had posted in the question it is possible to achieve a mild 'pop in'/'pop out' effect by merging the same image with an offset. – Vidhuran Jun 23 '13 at 07:50
@Vidhuran Please see update with example on how to add offset. – Jun 23 '13 at 09:34
@ken-abdias-software Thanks, but i believe i can't use drawImage as i'm using ImageData. I get this error `TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.` However based on your answer i was able to merge the two images to get the desired output. – Vidhuran Jun 23 '13 at 09:53
The code snippet is here `var mixFactor = 0.5; for(var i = 0; i < redData.length; i+=4) { redData[i] = redData[i] * mixFactor; redData[i+1] = redData[i+1] * mixFactor; redData[i+2] = redData[i+2] * mixFactor; } for(var i = 0; i < redData.length; i+=4) { redData[100+i] += blueData[i]*(1-mixFactor); redData[100+i+1] += blueData[i+1]*(1-mixFactor); redData[100+i+2] += blueData[i+2]*(1-mixFactor); }` – Vidhuran Jun 23 '13 at 09:53
And a crude working demo is here [link](https://developer.mozilla.org/en-US/demos/detail/3d-getusermedia) – Vidhuran Jun 23 '13 at 09:55
@ken-abdias-software It is a Video drawn onto an intermediate canvas – Vidhuran Jun 23 '13 at 10:26

user1444978 · Answer 2 · 2013-10-11T14:35:36.013

If you have not onlyImageDataobjects, but also sourcecanvaselements, you can use this method.

You can obtain base64-encoded image data by callingtoDataURLcanvas method. Then you can createImageelement from that data and then paste that image to destination canvas viadrawImage.

Example code:

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

i have exactly same problem and need to merge 2+ layers into one (to save as a single png), i like this approach personally — Alex K, Jan 14 '14 at 07:51

score 0 · Answer 3 · edited Jul 19 '13 at 03:26

0

what about functions of setting the transmission format 3d - from format full side by side to anaglyph, alternating rows, alternating columns, chessboard, original side by side and 2d from 3d ?

edited Jul 19 '13 at 03:26

Brad Larson

170,088
45
397
571

answered Jul 18 '13 at 15:48

alexey

1

Blending two ImageData into one ImageData with an offset in Javascript

3 Answers3