JavaScript - 如何从canvas元素下的图像中获取像素数据？

Question

3

您可以使用getImageData()函数在画布图像上采样像素颜色数据。如果我在背景图像或Flash影片上覆盖一个透明的画布元素，那么我是否可以通过canvas标签从中采样一种颜色？

- Geuis

这个问题可能相关（我也在尝试解决同样的问题）：https://dev59.com/1nE85IYBdhLWcg3wejfn - Anderson Green

2个回答

2

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

因此，不幸的是，目前可能无法实现。你的高层次目标是什么？我们可以想出另一种替代方案。

“我之前有一个想法，将图像数据复制到JavaScript对象中。你可以创建一个覆盖整个页面并捕获呈现屏幕图像的canvas元素。一旦你拥有了这些数据，你可以进行真实的跨浏览器测试。”

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

- Phil H

我之前有一个想法，即将图像数据复制到JavaScript对象中。您可以创建一个覆盖整个页面并捕获呈现屏幕图像的画布元素。一旦您获得了该数据，您可以进行真实的跨浏览器测试。 - Geuis

我已经在答案中添加了一条关于browsershots网站的注释，这个网站可以以一种漂亮、简单的方式实现你所想要的功能。 - Phil H

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bobince · Accepted Answer

Phil说得对，你做不到。Canvas的设计只返回自己本身的像素数据，而不是来自其他元素的任何屏幕渲染内容。

你可以创建一个覆盖整个页面并捕获渲染屏幕图像的canvas元素。

如果可能，这将是一个跨站点脚本安全漏洞。你可以通过iframe嵌入目标站点（利用用户的cookie /认证/内部网络访问它），然后逐像素吸出其中的内容。