题
是否可以使用 JavaScript 截取网页屏幕截图,然后将其提交回服务器?
我不太关心浏览器安全问题。ETC。因为实施将是为了 高温TA. 。但这可能吗?
解决方案
我已经使用 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 节点发送到服务器,然后在服务器端创建屏幕截图。
其他提示
谷歌正在 Google+ 中做到这一点,一位才华横溢的开发人员对其进行了逆向工程并制作了 http://html2canvas.hertzen.com/ 。要在 IE 中工作,您需要一个画布支持库,例如 http://excanvas.sourceforge.net/
我发现的另一个可能的解决方案是 http://www.phantomjs.org/ 它允许人们非常轻松地截取页面的屏幕截图以及更多内容。虽然我对这个问题的最初要求不再有效(不同的工作),但我可能会将 PhantomJS 集成到未来的项目中。
Pounder 是否可以通过将整个 body 元素设置到画布中然后使用 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");
然后你就可以在服务器端看到截图了。
这 SnapEngage 使用一个 Java小程序 (1.5+) 制作浏览器屏幕截图。AFAIK, java.awt.Robot
应该完成这项工作 - 用户只需允许小程序执行此操作(一次)。
我刚刚找到了一篇关于它的帖子:
您可以使用 HTA 来实现这一点 VB脚本. 。只需调用外部工具即可进行截图。我忘了叫什么名字了,但是在 Windows Vista 上有一个可以截屏的工具。您甚至不需要额外安装。
至于自动 - 这完全取决于您使用的工具。如果它有 API,我相信您可以通过几个 Visual Basic 调用来触发屏幕截图和保存过程,而用户不会知道您做了什么。
既然您提到了 HTA,我假设您使用的是 Windows 并且(可能)了解您的环境(例如操作系统和版本)非常好。
在 Javascript 中截取屏幕截图的一个很好的解决方案是 https://grabz.it.
他们有一个灵活且易于使用的屏幕截图 API,可供任何类型的 JS 应用程序使用。
如果你想尝试,首先你应该获得授权 应用密钥+秘密 和 免费软件开发工具包
然后,在您的应用程序中,实施步骤将是:
// 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 到图像 做得很好(比 html2canvas 好得多)。请参阅以下问题与解答: https://stackoverflow.com/a/32776834/207981
这个问题询问如何将其提交回服务器,这应该是可能的,但是如果您想要下载图像,您需要将其与 文件保存器.js, ,如果您想下载包含多个图像文件的 zip 文件,所有图像文件均在客户端生成,请查看 压缩包.
如果您愿意在服务器端执行此操作,可以选择以下选项 PhantomJS, ,现已弃用。最好的方法是使用 Headless Chrome ,比如 傀儡师 在 Node.JS 上。使用 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 服务,有很多选择,例如