使用 pixastic 混合两个图像不起作用。如何获得新图像？答案

【问题标题】：Blend two images with pixastic does not work. How to get the new image?使用 pixastic 混合两个图像不起作用。如何获得新图像？
【发布时间】：2013-05-15 05:42:14
【问题描述】：

嘿，我正在尝试将两个图像与 pixastic 混合。可以将一张图片拖放到另一张图片上（使用 jqueryUI），在找到正确的位置后，两张图片将合二为一。

所以我想使用 pixastic 混合效果。

到目前为止我已经试过了：

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。

我不知道它是否有效或如何获得新的混合图像..

请帮帮我！谢谢

【问题讨论】：

标签： image drag-and-drop blend pixastic

【解决方案1】：

我曾想过使用 html2canvas 来抓取图像，但当我发现即使 Pixastic 的网站上没有记录它时，我真的很惊讶，Blend 效果也有一个回调函数（与其他效果一样工作）：

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 函数有一个回调，它适用于所有效果。

【讨论】：