Pixastic이 제대로 작동하지 않는 이유는 무엇입니까?

Question

웹 페이지에서 대화식 이미지 처리를해야합니다. 나는 pixastic을 발견했고 그것은 직업에 좋게 보였다.

On this page 나는 이미지를 흐려 지려고 노력하지만, 나는 "blurfast"만 작동시킬 수 있습니다. "흐림"은 나를 위해 작동하지 않습니다.

나는 문서를보고 둘러 보았고 실패한 이유를 알 수 없습니다. 아무 생각 나니?

나는이 JS 사용 : 대부분의 조작을 위해

$(function(){ 
    var img = document.getElementById("imageone"); 

    $("#blurfastbutton").click(function() { 
     Pixastic.process(img, "blurfast", {amount:0.2}); 
    }); 

    $("#blurbutton").click(function() { 
     Pixastic.process(img, "blur"); 
    }); 
}); 

Answer 1

는 Pixastic는 <canvas> 요소로 <img> 요소를 교환하고 픽셀 당 조정을 수행 할 수 있습니다. "blur"을 사용하여 이미지를 조작 할 때 이미지 소스가 문서의 다른 도메인에 있기 때문에 보안 예외가 발생합니다.

Canvas 요소의 보안 제한으로 인해 Pixastic은 사용중인 페이지와 동일한 호스트에있는 이미지에만 적용됩니다. 아주 적은 양에 의해 또 다시 이미지 크기 조정 :이 다르게 작동하기 때문에 [source]

이 "blurfast"으로 발생하지 않는 이유입니다. 이것은 분명히 <canvas> 요소의 security policies을 위반하지 않습니다.

가장 좋은 방법은 결국 "blurfast" —에 붙는 것이 더 빠르고 동적 인 것입니다. "blur"을 사용하려면 모든 이미지가 현재 문서와 동일한 도메인에 있는지 확인해야합니다.