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

【问题标题】：Javascript - get pixel data from image under canvas element?Javascript - 从画布元素下的图像中获取像素数据？
【发布时间】：2009-03-25 22:21:20
【问题描述】：

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

【问题讨论】：

【解决方案1】：

菲尔说得对，你不能这样做。根据设计，Canvas 仅返回其自身的固有像素数据，而不是源自其他元素的任何屏幕渲染内容。

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

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

【讨论】：

【解决方案2】：

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

因此，不幸的是，目前这可能是不可能的。你更高层次的目标是什么？我们或许可以想出一条替代路线。

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

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

【讨论】：

我之前有一个想法，将图像数据复制到 javascript 对象中。您可以制作一个覆盖整个页面并捕获渲染屏幕图像的画布元素。一旦你有了这些数据，你也许可以进行真实世界的跨浏览器测试。
我已在有关 browsershots 网站的答案中添加了一条注释，它应该以一种不错、简单的方式完成您的想法。