使用 KineticJS 从画布中获取像素数据答案

【问题标题】：Getting Pixel-data from the canvas with KineticJS使用 KineticJS 从画布中获取像素数据
【发布时间】：2014-02-08 13:57:29
【问题描述】：

我正在尝试从画布中获取像素数据。已经有一个使用 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: Cannot call method 'getContext' of undefined（我用 [0] 和 [1] 都试过了）。这里的推理是，document.getElementsByTagName('canvas') 应该给我一个节点列表，我认为我可以从中获得一个画布对象。

通过上面提到的console.log()，我已经看到有两个画布对象，但我无法获得其中任何一个的上下文。

有没有人告诉我如何让这 3 行代码正常工作？

【问题讨论】：

标签： javascript canvas kineticjs

【解决方案1】：

你可能会在动力学启动之前这样做吗？看起来您的 canvas 的长度等于 0。

这个例子很好用：http://jsfiddle.net/lavrton/ft8M7/3/

【讨论】：

或者，您可以使用此方法获取特定层的真实上下文（如果舞台上有超过 1 个层，则很有用）： var realContext = layer.getContext()._context;
你好 lavrton 和 MarkE。它正在工作！问题确实是我在图层仍未添加到舞台时插入了代码。图层在 imageObj.onload-function 中添加到舞台（我在其中加载背景图片）...感谢您的帮助！