pixastic으로 두 이미지를 혼합해도 작동하지 않습니다. 새로운 이미지를 얻는 방법?

Question

안녕하세요 저는 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

가 호출해야합니다.

나는 그것이 작동하거나 내가 새로운 혼합 된 이미지를 얻을 수있는 방법을 알고하지는

..

제발 도와주세요! 감사합니다

Answer 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 함수에 대한 콜백 그리고 그것은 모든 효과를 사용할 수 있습니다.