混合两个图像与pixastic不起作用。如何获取新的图像？ [英] Blend two images with pixastic does not work. How to get the new image?

问题描述

嘿，我想要混合两个图像与pixastic。一个图像可以拖放到另一个图像上（使用jqueryUI），并且在它具有正确位置之后，两个图像将成为一个。

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.

所以我想使用

我到目前为止尝试过：

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

应该调用BlendTheImages函数，当较小的图像具有正确的位置混合两个图像。

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..

请帮助我！感谢

推荐答案

我以为使用html2canvas来抓住图像，但是当我发现，即使不是记录在Pixastic的网站中，Blend效果还有一个回调函数（就像其他效果一样）：

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";

对于 Pixastic.process 功能，它适用于所有效果。

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

这篇关于混合两个图像与pixastic不起作用。如何获取新的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！