Blend two images with pixastic does not work. How to get the new image?

问题

Hey i´m trying to blend two images with pixastic. One image can be dragged an dropped on the other image (with jqueryUI) and after it has got the right position the two images shall become one.

So i want to use the pixastic blend effect.

I tried this so far:

function BlendTheImages() {
   var img = new Image();
   img.onload = function() {
var blendImg = new Image();
 blendImg.onload = function() {
  Pixastic.process(img, "blend", 
        {
            amount : 1, 
            mode : "multiply", 
            image : blendImg
        }
    );
}
blendImg.src = "Small_Image.png";
     }
img.src = "Background_Big_Image.jpg";
    }    

The function BlendTheImages should be called, when the smaller image has the right position to blend the two images.

I don´t know if it works or how i can get the new blended image..

Please help me! Thanks

回答1:

I thought about using html2canvas to grab the image but then I got really surprised when I discovered that, even though it's not documented in Pixastic's website, the Blend effect also has a callback function (that works just like the other effects):

var img = new Image();
img.onload = function() {
    Pixastic.process(img, "blend", 
        {
            amount : 1.0, 
            mode : "Multiply", 
            image : someOtherImage
        }, function(blendedImg) {
            console.log(blendedImg);
            applySepia(blendedImg);
        }
    );
}
document.body.appendChild(img);
img.src = "myimage.jpg";

There's a callback for the Pixastic.process function and it works for all effects.

来源：https://stackoverflow.com/questions/16653358/blend-two-images-with-pixastic-does-not-work-how-to-get-the-new-image