用 JavaScript 截屏一个网页？

有没有可能使用 JavaScript 截屏一个网页，然后将其提交回服务器？

我不太关心浏览器的安全问题等，因为实现将是为 卫生技术评估。但它是可能的吗？

129255 次浏览
小开

您可以使用 HTA 和 VBScript来实现这一点。只需要调用一个外部工具来进行截屏。我忘了它的名字，但是在 WindowsVista 上有一个截图工具。你甚至不需要额外的安装。

至于自动化——完全取决于你使用的工具。如果它有一个 API，我确信您可以通过几个 VisualBasic 调用触发屏幕快照和保存过程，而不会让用户知道您所做的事情。

既然你提到了 HTA，我假设你使用的是 Windows，并且(可能)非常了解你的环境(例如操作系统和版本)。

小开

我们对报告错误也有类似的要求。因为这是一个内部网场景，所以我们可以使用浏览器插件(比如用于 Firefox 的 射击和用于 Internet Explorer 的 屏幕截图)。

小开
最佳答案

我已经通过使用 ActiveX 控件为 HTA 完成了这项工作。在 VB6中构建控件来截屏非常简单。我必须使用 keybd _ event API 调用，因为 SendKeys 不能执行 PrintScreen。下面是代码:

Declare Sub keybd_event Lib "user32" _
(ByVal bVk As Byte, ByVal bScan As Byte, ByVal dwFlags As Long, ByVal dwExtraInfo As Long)


Public Const CaptWindow = 2


Public Sub ScreenGrab()
keybd_event &H12, 0, 0, 0
keybd_event &H2C, CaptWindow, 0, 0
keybd_event &H2C, CaptWindow, &H2, 0
keybd_event &H12, 0, &H2, 0
End Sub

这只能让你看到窗户边的剪贴板。

另一种选择是，如果您希望截屏的窗口是 HTA，那么只需使用 XMLHTTPRequest 将 DOM 节点发送到服务器，然后创建截屏服务器端。

小开

这可能不是您理想的解决方案，但是仍然值得一提。

Snapsie 是一个开源的 ActiveX对象，可以捕捉和保存 Internet Explorer 截图。一旦在客户端注册了 DLL 文件，您应该能够捕获截图并使用 JavaScript 将文件上传到服务器。缺点: 它需要在客户端注册 DLL 文件，并且只能处理 Internet Explorer。

小开

SnapEngage使用 Java 小程序(1.5 +)制作浏览器屏幕截图。AFAIK，java.awt.Robot应该做这项工作-用户只需要允许小程序这样做(一次)。

我刚刚发现了一篇关于它的文章:

  • 堆栈溢出问题
  • 博客后 SnapABug 是如何工作的——以及它们应该做什么
小开

庞德的，如果这是可能的，通过设置整个身体元素到一个画布，然后使用画布2图像？

Http://www.nihilogic.dk/labs/canvas2image/

小开

一种可能的方法，如果在 windows 上运行并且安装了.NET，你可以这样做:

public Bitmap GenerateScreenshot(string url)
{
// This method gets a screenshot of the webpage
// rendered at its full size (height and width)
return GenerateScreenshot(url, -1, -1);
}


public Bitmap GenerateScreenshot(string url, int width, int height)
{
// Load the webpage into a WebBrowser control
WebBrowser wb = new WebBrowser();
wb.ScrollBarsEnabled = false;
wb.ScriptErrorsSuppressed = true;
wb.Navigate(url);
while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); }




// Set the size of the WebBrowser control
wb.Width = width;
wb.Height = height;


if (width == -1)
{
// Take Screenshot of the web pages full width
wb.Width = wb.Document.Body.ScrollRectangle.Width;
}


if (height == -1)
{
// Take Screenshot of the web pages full height
wb.Height = wb.Document.Body.ScrollRectangle.Height;
}


// Get a Bitmap representation of the webpage as it's rendered in the WebBrowser control
Bitmap bitmap = new Bitmap(wb.Width, wb.Height);
wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height));
wb.Dispose();


return bitmap;
}

然后通过 PHP 你可以做到:

exec("CreateScreenShot.exe -url http://.... -save C:/shots domain_page.png");

然后在服务器端就有了截图。

小开

Google 正在 Google + 中进行这项工作，一位有才华的开发人员对其进行逆向工程，并生成了 http://html2canvas.hertzen.com/。要在 IE 中工作，你需要一个画布支持库，比如 http://excanvas.sourceforge.net/

小开

我发现的另一个可能的解决方案是 http://www.phantomjs.org/，它允许人们非常容易地对页面进行截图，甚至更多。虽然我对这个问题的原始要求已经不再有效(不同的工作) ，但我很可能会将 PhantomJS 集成到未来的项目中。

小开

在 Javascript 中截屏的一个很好的解决方案是 https://grabz.it。

它们有一个灵活且易于使用的屏幕快照 API，可用于任何类型的 JS 应用程序。

如果你想尝试它，首先你应该得到授权 应用程序密钥 + 机密和 免费 SDK

然后，在你的应用程序中，实现步骤应该是:

// include the grabzit.min.js library in the web page you want the capture to appear
<script src="grabzit.min.js"></script>


//use the key and the secret to login, capture the url
<script>
GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com").Create();
</script>

屏幕截图可以用不同的 参数定制。例如:

GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com",
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>

仅此而已。 然后只需稍等片刻，图像就会自动出现在页面底部，而无需重新加载页面。

还有其他功能的屏幕截图机制，您可以探索 给你。

也可以在本地保存截图。为此，您将需要利用 GrabzIt 服务器端 API。更多信息请查看详细指南 给你。

小开

我发现 Dom-to-image做得很好(比 html2Canvas 好得多)。请参阅以下问题和答案: https://stackoverflow.com/a/32776834/207981

这个问题问的是如何将这些文件提交回服务器，这应该是可能的，但是如果你想下载这些图片，你需要将它们与 FileSaver.js结合起来，如果你想下载一个包含多个图片文件的 zip 文件，这些文件都是在客户端生成的，请看一下 Jszip。

小开

如果您愿意在服务器端执行此操作，那么可以使用 PhantomJS这样的选项，它现在已被废弃。最好的方法是使用 Node.JS 上的类似 木偶师的 Headless Chrome。使用 Puppeteer 捕获一个网页将如下所示:

const puppeteer = require('puppeteer');


(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});


await browser.close();
})();

然而，它需要无头铬能够在您的服务器上运行，这有一些依赖性，可能不适合在受限制的环境。(另外，如果不使用 Node.JS，则可能需要自己处理浏览器的安装/启动。)

如果您愿意使用 SaaS 服务，有许多选项，如

小开

这个问题已经过时了，但也许仍有人对最先进的答案感兴趣:

你可以使用 getDisplayMedia:

Https://github.com/ondras/browsershot

小开

截至今天2020年4月 GitHub 库 html2Canvas Https://github.com/niklasvh/html2canvas

GitHub 20K star | Azure 管道: 成功下载 | 下载1.3 M/mo |

引用: “ JavaScript HTML 渲染器该脚本允许您直接在用户浏览器 上对网页或其部分内容进行“截屏”。截图是基于 DOM 的，因此可能不是100% 准确的真实表示，因为它没有制作实际的截图，而是基于页面上可用的信息构建截图。

小开

我编写了一个简单的函数，它使用 rasterizeHTML 构建一个包含页面内容的 svg 和/或图像。

看看这个:

Https://github.com/orisha/tdg-screen-shooter-pure-js


提交答案