149

是否可以使用 JavaScript 截取网页的屏幕截图，然后将其提交回服务器？

我不太关心浏览器的安全问题。等等，因为实施将是HTA。但有可能吗？

4

15 回答 15

142

Google 正在 Google+ 中进行此操作，一位才华横溢的开发人员对其进行了逆向工程并制作了http://html2canvas.hertzen.com/。要在 IE 中工作，您需要一个画布支持库，例如http://excanvas.sourceforge.net/

于 2011-08-02T22:53:13.273 回答
43

我已经通过使用 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 节点发送到服务器，然后在服务器端创建截屏。

于 2008-09-15T14:40:44.407 回答
14

我发现的另一种可能的解决方案是http://www.phantomjs.org/，它允许人们非常轻松地截取页面和更多内容。虽然我对这个问题的原始要求不再有效（不同的工作），但我可能会将 PhantomJS 集成到未来的项目中。

于 2012-02-13T23:25:29.310 回答
12

Pounder 是否可以通过将整个身体元素设置为画布然后使用 canvas2image 来做到这一点？

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

于 2010-10-25T08:29:36.733 回答
9

一种可能的方法是，如果在 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");

然后你在服务器端有截图。

于 2010-12-02T21:47:16.570 回答
7

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

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

于 2008-09-15T14:58:00.480 回答
6

我们对报告错误有类似的要求。因为它是针对 Intranet 场景的，所以我们能够使用浏览器插件（例如用于 Firefox的Fireshot和用于 Internet Explorer 的IE Screenshot ）。

于 2008-09-13T15:28:00.533 回答
3

SnapEngage使用Java 小程序( 1.5+) 来制作浏览器屏幕截图。AFAIK，java.awt.Robot应该完成这项工作 - 用户只需允许小程序执行它（一次）。

我刚刚找到了一篇关于它的帖子：

于 2010-10-14T19:01:23.217 回答
2

这个问题很老，但也许仍然有人对最先进的答案感兴趣：

您可以使用getDisplayMedia：

https://github.com/ondras/browsershot

于 2019-11-26T18:06:31.083 回答
1

您可以使用 HTA 和VBScript来实现。只需调用外部工具来进行屏幕截图。我忘记了名字是什么，但是在 Windows Vista 上有一个工具可以做截图。您甚至不需要额外安装它。

至于自动 - 这完全取决于您使用的工具。如果它有一个 API，我相信你可以通过几个 Visual Basic 调用触发屏幕截图和保存过程，而用户不知道你做了什么。

既然您提到了 HTA，我假设您在 Windows 上并且（可能）非常了解您的环境（例如操作系统和版本）。

于 2008-09-13T10:52:47.263 回答
1

我发现dom-to-image做得很好（比 html2canvas 好得多）。请参阅以下问题和答案：https ://stackoverflow.com/a/32776834/207981

This question询问关于将其提交回服务器，这应该是可能的，但是如果您要下载图像，则需要将其与FileSaver.js结合使用，并且如果您想下载 zip 与客户端生成的多个图像文件都看一下jszip。

于 2018-03-26T15:38:03.920 回答
1

如果您愿意在服务器端执行此操作，可以使用PhantomJS之类的选项，但现在已弃用。最好的方法是在 Node.JS 上使用类似Puppeteer 的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();
})();

但是，它需要 headless chrome 才能在您的服务器上运行，这有一些依赖性，可能不适合受限环境。（另外，如果您不使用 Node.JS，您可能需要自己处理浏览器的安装/启动。）

如果您愿意使用 SaaS 服务，有很多选择，例如

于 2018-11-16T10:38:27.817 回答
0

https://grabz.it提供的一个很好的 Javascript 截图解决方案。

他们有一个灵活且易于使用的屏幕截图 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。有关更多信息，请查看此处的详细指南。

于 2017-07-01T10:30:10.880 回答
0

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

GitHub 20K 星| Azure pipeles : 成功 | 下载量 1.3M/月 |

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

于 2020-04-16T16:59:00.890 回答
0

我做了一个简单的函数，它使用 rasterizeHTML 来构建 svg 和/或带有页面内容的图像。

看看这个 ：

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

于 2020-06-17T16:17:07.297 回答