使用KineticJS从画布获取Pixel数据

Question

我正在尝试从画布中获取像素数据。已经存在使用KineticJS库构建的现有动画动画。我现在要做的就是获得特定方块中某些像素的rgb值。

使用：

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

我已经发现KineticJS有2张画布。我尝试使用以下代码完成工作：

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

然而，这导致了一个错误：Uncaught TypeError：无法调用未定义的方法'getContext'（我用[0]和[1]都尝试过）。这里的原因是，document.getElementsByTagName（'canvas'）应该给我一个Node-List，我以为我可以从中获得一个canvas对象。

使用上面提到的console.log（），我已经看到有两个canvas对象，但是我无法获得其中任何一个的上下文。

有没有人知道如何让这三行代码正常工作？

Answer 1

你可能在动能启动前做这个吗？看起来您的canvas长度等于0。

此示例正常工作：http://jsfiddle.net/lavrton/ft8M7/3/