在浏览器中抓取选定区域作为图像

Grabbing selected area within browser as an image

本文关键字：区域图像浏览器抓取更新时间：2023-09-26

对于特定的项目，我需要(有或没有浏览器插件/扩展?)能够让用户选择网页(任何其他网站)的所需部分，并自动将所选区域保存为图像到他的帐户在我们的网站上。

因此，逻辑类似于屏幕捕获的扩展，您在屏幕上拖动一个矩形，它会自动捕获图像。从此，只要用户松开鼠标按钮，图像应该以某种方式转移到我们的网站，并放在他的帐户网页上。

我只是不知道从哪里开始寻找解决方案以及如何完成这样的任务。这可以实现与javascript吗?或者延期是必须的?

如有任何帮助，不胜感激。

谢谢。

考虑Flash。Flash可以在自己内部打开一个浏览器窗口，用户可以浏览到该窗口内的任何网站，你可以在顶部保留一个工具栏，允许他们打开/关闭捕获。它们永远不会离开flash窗口，所以它们会留在你的网站上，并且flash可以将它们绘制的矩形返回给你的服务器。

我很确定，如果我有必要，我可以用flex做类似的事情，但这需要我几个星期的时间。不确定，但我很怀疑iframe和JS可以做同样的事情。

Firefox的<canvas>实现有一个drawWindow()方法。出于安全原因，它已禁用web内容，但是，您需要扩展才能使用它。画布上有了屏幕截图之后，就可以调用toDataURL()来获取图像数据。看看Adblock Plus是如何做到的。

Chrome有一个类似的扩展API: Chrome .tabs. capturevisibletab()。在这里，你不能选择你想要的页面的哪一部分，但你仍然可以将结果图像绘制到画布上，然后根据你的需要对其进行切片和切块。