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

Question

您可以使用getImageData（）在画布图像上采样像素颜色数据。 如果我在背景图像或Flash电影上叠加了透明的画布元素，是否可以通过canvas标签从其中采样颜色？

Answer 1

菲尔是对的，你做不到。 根据设计，画布仅返回其自身的固有像素数据，而不返回任何其他元素在屏幕上呈现的内容。

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

如果可能的话，那将是一个跨站点脚本的安全漏洞。 您可以对目标站点进行构架（利用用户的cookie /身份验证/内联网访问它），然后逐个像素地从目标站点中吸取内容。

Answer 2

我觉得不是。 届时您将获得画布的颜色。 我确实找到了方法document.defaultview.getComputedStyle(element,pseudoElt) ，但是在没有背景色的1像素div上，它返回了“透明”。

因此，不幸的是，目前这可能是不可能的。 您的更高目标是什么？ 我们也许可以提出一条替代路线。

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

如果您不介意这是静态图片，那么可以使用一个很棒的网站： Browser Shots 。 它生成在各种不同浏览器中运行的网站的屏幕截图。