Javascript - 从canvas元素下的图像获取像素数据？

Question

您可以使用getImageData（）在画布图像上对像素颜色数据进行采样。如果我在背景图像或flash影片上叠加透明画布元素，我可以通过canvas标签从中采样颜色吗？

Answer 1

菲尔是对的，你不能这样做。根据设计，Canvas只返回自己的内在像素数据，而不是任何来自其他元素的屏幕渲染内容。

  

您可以制作一个覆盖整个页面的画布元素，并捕获渲染屏幕的图像。

如果可能，那将是一个跨站点脚本的安全漏洞。您可以iframe一个目标站点（利用用户cookie / authentication / intranet来访问它），然后逐个像素地从中吸取内容。

Answer 2

我想不是。你会得到那个画布的颜色。我确实找到了方法document.defaultview.getComputedStyle(element,pseudoElt)，但在没有背景颜色的1像素div上，它返回'透明'。

所以，不幸的是，目前这可能是不可能的。你的更高层次的目标是什么？我们或许可以提出另一条路线。

“我之前有想法将图像数据复制到javascript对象中。您可以制作一个覆盖整个页面的画布元素并捕获渲染屏幕的图像。一旦掌握了这些数据，就可以实现真实世界也许是跨浏览器测试。“

如果您不介意它是静态图像，那么有一个很棒的网站可以为您执行此操作：Browser Shots。它会生成在各种不同浏览器中运行的网站截图。