Question

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

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

如果可以通过将整个身体元素设置为画布然后使用canvas2image来实现这一点？

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

Answer 5

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

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

Answer 6

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

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

Answer 7

我们有类似的报告错误的要求。由于是针对Intranet方案，我们可以使用浏览器插件（例如Firefox Fireshot和Internet Explorer IE Screenshot）。

Answer 8

SnapEngage使用Java applet（1.5+）制作浏览器屏幕截图。 AFAIK，java.awt.Robot应该完成这项工作 - 用户只需允许applet（一次）。

我刚发现了一篇关于它的帖子：

Stack Overflow问题 JavaScript code to take a screenshot of a website without using ActiveX
博客帖子 How SnapABug works – and what they should do

Answer 9

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

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

由于您提到过HTA，我假设您使用的是Windows，并且（可能）非常了解您的环境（例如操作系统和版本）。

Answer 10

使用Javascript进行屏幕截图的绝佳解决方案是https://grabz.it。

它们具有灵活且易于使用的屏幕截图API，可供任何类型的JS应用程序使用。

如果您想尝试一下，首先应该获得授权app key + secret和free 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>

可以使用不同的parameters自定义屏幕截图。例如：

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

这就是全部。然后只需等待一会儿，图像就会自动显示在页面底部，而无需重新加载页面。

屏幕截图机制还有其他功能，您可以浏览here。

也可以在本地保存屏幕截图。为此，您需要使用GrabzIt服务器端API。有关详细信息，请查看详细指南here。

Answer 11

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

这个问题询问是否应该将其提交给服务器，这应该是可能的，但是如果您要下载图像，那么您希望将其与FileSaver.js结合使用，如果你想下载一个包含多个图像文件的zip，所有生成的客户端都会看一下jszip。

Answer 12

如果您愿意在服务器端进行操作，则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();
})();

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

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

Answer 13

这个问题很老，但也许还有人对最新的答案感兴趣：

您可以使用getDisplayMedia：

https://github.com/ondras/browsershot

Answer 14

截止到2020年4月GitHub库html2Canvas https://github.com/niklasvh/html2canvas

GitHub 20K stars | Azure管道：成功|下载1.3M / mo |

quote：“ JavaScript HTML渲染器该脚本使您可以直接在用户浏览器上获取网页或部分网页的“屏幕快照” 。该屏幕截图基于DOM和这样的结果可能无法完全真实地表示出来，因为它无法制作出实际的屏幕截图，而是根据页面上的可用信息来构建屏幕截图。

Answer 15

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

检查一下：

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

使用JavaScript截取网页截图？

15 个答案: