blend two images on a javascript canvas

How do you b开发者_如何学编程lend two arrays of pixel data to create one image? with the option of using different blending modes?

---

Pixastic is a special framework for advanced use of canvas, here are blending examples: http://www.pixastic.com/lib/docs/actions/blend/

If you would like do this alone, you can extract pixel data from 2 images, blend it with a mathematical equation, and put into a canvas. Here is information how to get and put pixel data from/to canvas: http://ajaxian.com/archives/canvas-image-data-optimization-tip

---

Update: Simple example with alpha blending of 2 images in proportion 50-50. (Images borrowed from http://www.pixastic.com/sample/Butterfly.jpg and http://www.pixastic.com/sample/Flower.jpg )

<img src="Butterfly.jpg" id="img1">
<img src="Flower.jpg" id="img2">
<p>Blended image<br><canvas id="canvas"></canvas></p>
<script>
window.onload = function () {
    var img1 = document.getElementById('img1');
    var img2 = document.getElementById('img2');
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var width = img1.width;
    var height = img1.height;
    canvas.width = width;
    canvas.height = height;

    var pixels = 4 * width * height;
    context.drawImage(img1, 0, 0);
    var image1 = context.getImageData(0, 0, width, height);
    var imageData1 = image1.data;
    context.drawImage(img2, 0, 0);
    var image2 = context.getImageData(0, 0, width, height);
    var imageData2 = image2.data;
    while (pixels--) {
        imageData1[pixels] = imageData1[pixels] * 0.5 + imageData2[pixels] * 0.5;
    }
    image1.data = imageData1;
    context.putImageData(image1, 0, 0);
};
</script>

---

I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage:

// Might be an 'offscreen' canvas
var over  = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

See the README for more information.

---

I am tasked with recreating this java applet using JavaScript (must be tablet friendly, and work in all modern browsers > IE8). I am creating images using: var image1 = new Image(); and then setting source: img.src = "some path";

So, from pepkin88 I see that the following function will blend two images by combining their pixel array data, overriding previous data from the first image with the new blended data, and finally putting the new data on the canvas resulting in a blended image:

window.onload = function () {
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = img1.width;
var height = img1.height;
canvas.width = width;
canvas.height = height;

var pixels = 4 * width * height;
context.drawImage(img1, 0, 0);
var image1 = context.getImageData(0, 0, width, height);
var imageData1 = image1.data;
context.drawImage(img2, 0, 0);
var image2 = context.getImageData(0, 0, width, height);
var imageData2 = image2.data;
while (pixels--) {
    imageData1[pixels] = imageData1[pixels] * 0.5 + imageData2[pixels] * 0.5;
}
image1.data = imageData1;
context.putImageData(image1, 0, 0); };

HOWEVER, if you viewed the java applet that I'm responsible for recreating, you see that blending happens in real-time continuously as you drag the image around with the pointer the images are constantly blending based on their overlapped regions..

SO, I'm looking to modify the code to account for this, and I continually have the x, y, positions of images drawn (based on top left corner), and the w, h of all images stays static:

the following snippets don't include everything I'm doing, just what I sense is important for you to know

//Rectangle Class from Java converted to JS
function Rectangle(x, y, width, height, src) {
        this.x   = x; 
        this.y   = y; 
        this.w   = width;
        this.h   = height;
        this.img = new Image();
        this.img.src = src;
    }

//Stores instance in rect array
rect[0] = new Rectangle(1, (height - 111)/2, 150, 105, "images/mMain.png");

//Draw method that's called
Rectangle.prototype.draw = function(ctx) {
        //this.checkBound();
        ctx.drawImage(this.img, this.x, this.y, this.w, this.h);
        prepareMix(this.img, this.x, this.y, this.w, this.h);
    }

So, I'm working on a prepareMix function that receives image info and uses it to get and store image data:

 function prepareMix(src, x, y, w, h) {
        
        pixels = 4 * w * h;
        var image = mtx.getImageData(x, y, w, h);
        var imgData = image.data; 
    }

Made a list of what to do:

1. Sense the overlapping
2. Get and Store the overlapping image data
3. Mix the overlapping region data arrays
4. Replace the overlapping image data with the blended data
5. Put the new data on the canvas

1. Sense the Overlapping:

Plan: Store image positions and compare positions data to know whether or not overlapping is occurring. IF overlapping is TRUE, which two images is it true for? Distinguish these images that're overlapping from other images so that methods can be called on them.

js, css, html, and images in zip here BOX