使用KineticJS從畫布獲取像素數據

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);

但是，這導致了一個錯誤：未捕獲的TypeError：無法調用未定義的方法“ getContext”（我在[0]和[1]上都嘗試過）。 合理的說，document.getElementsByTagName（'canvas'）應該給我一個Node-List，我認為我可以從中獲得一個canvas對象。

通過上面提到的console.log（），我已經看到有兩個畫布對象，但是我無法獲得其中任何一個的上下文。

有沒有人提示我如何使這三行代碼正常工作？

Answer 1

可以在動力學啟動之前這樣做嗎？ 看起來您的canvas長度等於0。

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