2013-07-15 6 views
1

pixatic libary의 일부 기능을 사용하고 kineticjs와 결합하려고합니다. 그 중 하나는 카티 메틱으로 만들어진 이미지에 pixastic의 세피아 효과를 적용하는 것입니다. kineticjs와 pixastic을 결합하여 이미지 효과 적용

내가 여기 jsfiddle 설정을 가지고 :

function sepia() { 
    Pixastic.process(darth, "sepia"); 
    layer.draw(); 
} 

을하지만 이미지는 동일하게 유지 :

http://jsfiddle.net/SkVJu/28/

나는 다음과 같은 작업 거라 생각 했어요. 내가 뭔가를 놓쳤습니까? 아니면 두 도서관을 함께 결합하는 것이 불가능합니까?

답변

1

일반 이미지 객체와 약간 다르므로 Kinetic.Image 객체에 Pixastic 기능을 직접 적용 할 수 없다고 생각합니다.

은 양자 택일로, 당신은 당신이 그 이미지에 Pixastic 효과를 실행할 수 있습니다, 이미지의 원본 소스를 잡기 위해 필요하고 set 후 새로운 영향을받는 이미지로 Kinetic.Image 객체입니다. jsfiddle

참고 :

function sepia() { 
    var sepia = Pixastic.process(darth.attrs.image, "sepia"); 
    darth.setImage(sepia); 
    layer.draw(); 
} 

여기에 전체 코드의가 jsfiddle에서 작동하지 않습니다과 같이, 로컬 서버에서이 작업을 실행해야합니다 (pixastic 라이브러리는 할 수 없습니다

2 주)를 CDN 호스트하지 않고, 외부 자원으로로드 할 수 : 당신은 다른 당신의을 imageObj.onload 기능의 var layer 외부를 선언했다, 또는 10 함수가 imageObj.onload 내부에서 layer에 액세스 할 수 없습니다. 당신은 jsfiddle에서 어떻게했는지 알 수 있습니다.

+0

완벽하게 작동합니다. 도움을 많이 주셔서 감사합니다. 문제를 해결하려고 몇 시간 동안 놀았습니다. –

+0

나는 이것을 시도해 보았는데 btn 클릭에 영향을 미치려고 할 때 다음과 같은 오류가 발생합니다. "Uncaught SecurityError : 'CanvasRenderingContext2D'에 'getImageData'를 실행하지 못했습니다 : 캔버스가 원본 데이터에 의해 오염되었습니다." – Kosmog