mélanger deux images sur une toile javascript

Pixastic est un cadre spécial pour une utilisation avancée de la toile, voici le mélange exemples: http://www.pixastic.com/lib/docs/actions/blend/

Si vous souhaitez faire cela seul, vous pouvez extraire des données de pixel à partir de 2 images, de la mélanger à une équation mathématique, et mis dans une toile. Ici l'information comment obtenir et de mettre les données de pixel à partir de/à la toile:
http://ajaxian.com/archives/canvas-image-data-optimization-tip

---

Mise à jour:
Exemple Simple avec alpha fusion de 2 images en proportion de 50-50.
(Images empruntées http://www.pixastic.com/sample/Butterfly.jpg et 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>

Je suis chargé de recréer cette applet java à l'aide de JavaScript (doit être comprimé convivial, et de travailler dans tous les navigateurs modernes > IE8).
Je suis de la création d'images à l'aide de: var image1 = new Image(); et alors la configuration de la source: img.src = "some path";

Donc, à partir de pepkin88 je vois que la fonction suivante va se fondre deux images en combinant leurs pixel de la matrice de données, écrasant les données précédentes à partir de la première image avec le nouveau mélangé de données, et enfin mettre les nouvelles données sur la toile, résultant en une image homogène:

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

TOUTEFOIS, si vous avez vu l'applet java que je suis responsable de recréer, vous voyez que le mélange se déroule en temps réel en continu à mesure que vous faites glisser l'image avec le pointeur de la les images sont constamment fusion basée sur leurs régions superposées..

DONC, je cherche à modifier le code pour tenir compte de cela, et j'ai continuellement des x, des y, des positions des images tirées (basé sur le coin en haut à gauche), et le w, h de toutes les images reste statique:

les extraits suivants ne comprennent pas tout ce que je fais, tout ce que je sens est important pour vous de savoir

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

Donc, je suis en train de travailler sur un prepareMix fonction qui reçoit de l'information d'image et l'utilise pour obtenir et stocker des données d'image:

 function prepareMix(src, x, y, w, h) {

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

Fait une liste de ce à faire:

1. Sens le chevauchement
2. Obtenir et Stocker le chevauchement des données d'image
3. Mélanger la zone de chevauchement des données des tableaux
4. Remplacer le chevauchement des données d'image avec le mélange de données
5. Mettre les nouvelles données sur la toile

1. Sens le Chevauchement:

Plan: de l'image du Magasin positions et de comparer les positions de données pour savoir si oui ou non chevauchement se produit.
SI le chevauchement est VRAI, les deux images est-il vrai? Distinguer ces images qui êtes chevauchement à partir d'autres images de sorte que les méthodes peuvent être appelées sur eux.

js, css, html, et les images dans un fichier zip ici BOÎTE