KineticJS를 사용하여 캔버스에서 픽셀 데이터 가져 오기

Question

캔버스에서 픽셀 데이터를 가져 오려고합니다. 이미 KineticJS 라이브러리를 사용하여 제작 된 기존의 애니메이션이 있습니다. 지금하고 싶은 것은 특정 사각형의 일부 픽셀의 RGB 값을 얻는 것입니다. 사용하여

은 :

console.log(document.getElementsByTagName('canvas')); 

이미 KineticJS에 의해 생산이 캔버스가 있다는 것을 알아 냈다. 내가 작업이 다음 코드로 끝낼려고 그러나

var canvas = document.getElementsByTagName('canvas')[0]; 
var context = canvas.getContext("2d");   
var imageData = context.getImageData(20, 20, 10, 10); 

,이 오류가 발생 : catch되지 않은 형식 오류를 : 정의되지 않은 방법 '는 getContext'을 호출 할 수 없습니다 (나는 그것을 모두 시도 [0] [1]). 여기에있는 추론은 document.getElementsByTagName ('canvas')가 Canvas 객체를 얻을 수있을 것이라고 생각한 Node-List를 제공해야합니다.

위에서 언급 한 console.log()에서 나는 이미 두 개의 캔버스 객체가 있음을 보았지만 둘 중 하나의 컨텍스트를 얻을 수 없다는 것을 알았습니다.

내가 3 줄의 코드를 작동시키는 방법에 대한 조언이 있으십니까?

Answer 1

키네틱 초기화 전에 이것을 할 수 있습니까? http://jsfiddle.net/lavrton/ft8M7/3/