Question

出于支持原因，我希望用户能够尽可能简单地截取当前浏览器窗口的屏幕截图并将其发送到服务器。

任何（疯狂的）想法？

Answer 1

如果你能做到这一点，这似乎是JavaScript中一个非常大的安全漏洞。想象一下，恶意用户使用XSS攻击在您的网站上安装该代码，然后截取您的所有日常工作。想象一下你的网上银行发生的事情......

但是，可以在JavaScript之外执行此类操作。我开发了一个used screen capture code like this的Swing应用程序，当用户遇到RuntimeException时，该应用程序可以很好地向服务台发送电子邮件并附带截图。

我想你可以尝试一个挂在角落里的签名Java小程序（震惊！恐怖！noooooo！）。如果使用安装时给出的适当安全权限执行，则可能会强制执行该类屏幕截图代码。

为方便起见，这里是我链接到的网站的代码：

import java.awt.Dimension;
import java.awt.Rectangle;
import java.awt.Robot;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
import java.io.File;

...

public void captureScreen(String fileName) throws Exception {

   Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
   Rectangle screenRectangle = new Rectangle(screenSize);
   Robot robot = new Robot();
   BufferedImage image = robot.createScreenCapture(screenRectangle);
   ImageIO.write(image, "png", new File(fileName));
}
...

Answer 2

您可以尝试在画布中呈现整个页面并将此图像保存回服务器。玩得开心：）

Answer 3

网页无法做到这一点（或者至少，如果可以的话，我会非常惊讶，在任何浏览器中），但Firefox扩展可以。请参阅https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas - 当该页面显示“Chrome权限”时，表示扩展程序可以执行此操作，但网页不能。

Answer 4

在我看来，支持需要（至少）两个问题的答案：

屏幕是什么样的？和
为什么看起来那样？

屏幕截图 - 视觉效果 - 是非常必要的并且回答了第一个问题，但它无法回答第二个问题。

作为第一次尝试，我会尝试将整个页面发送到支持。支持技术人员可以在他的浏览器中显示该页面（回答第一个问题）;并且还可以看到客户的html的当前状态（有助于回答第二个问题）。

我尝试通过AJAX或作为表单的有效负载发送尽可能多的客户端JS页面。我也不会在页面上发送信息：任何影响页面状态的信息，如cookie或会话ID等等。

cust可能有一个类似提交的按钮来启动该过程。

我认为这样可行。让我们看看：它需要服务器上的某个CGI来捕获传入的用户页面并使其可用于支持，可能是通过写入磁盘文件。然后，支持人员可以加载（或自动加载）相同的页面。所有其他信息（cookie等）都可以放入支持的页面中。

PLUS：处理提交按钮onclick（）的客户端JS也可以包含任何有用的JS变量值！

HTH

- 皮特

Answer 5

我见过人们用两种方法做到这一点：

设置一个单独的服务器进行截屏并在那里运行一堆firefox实例，如果你在ruby中执行它，请查看这两个gem：selenium-webdriver和headless
使用http://url2png.com等托管解决方案（方便）

Answer 6

请参阅此处分享的答案，以便相对成功地执行此操作： https://stackoverflow.com/a/6678156/291640

利用： https://github.com/niklasvh/html2canvas

Answer 7

您也可以使用Fireshot插件执行此操作。我使用以下代码（我从API代码中提取，因此我不需要包含API JS）来直接调用Fireshot对象：

    var element = document.createElement("FireShotDataElement");
element.setAttribute("Entire", true);
element.setAttribute("Action", 1);
element.setAttribute("Key", "");
element.setAttribute("BASE64Content", "");
element.setAttribute("Data", "C:/Users/jagilber/Downloads/whatev.jpg");

if (typeof(CapturedFrameId) != "undefined")
        element.setAttribute("CapturedFrameId", CapturedFrameId);


document.documentElement.appendChild(element);

var evt = document.createEvent("Events");
evt.initEvent("capturePageEvt", true, false);

element.dispatchEvent(evt);

注意：我不知道此功能是否仅适用于付费版本。

Answer 8

您可以尝试PhantomJs，一个无头浏览工具包。 http://phantomjs.org/

以下Javascript示例演示了基本的屏幕截图功能：

var page = require('webpage').create();

page.settings.userAgent = 'UltimateBrowser/100';
page.viewportSize = { width: 1200, height: 1200 };
page.clipRect = { top: 0, left: 0, width: 1200, height: 1200 };

page.open('https://google.com/', function () {
  page.render('output.png');
  phantom.exit();
});

Answer 9

我理解这篇文章已有5年历史了，但是为了将来的访问，我会在这里添加我自己的解决方案，我认为除了jQuery之外没有任何第三方库的解决原始帖子的问题

pageClone = $('html').clone();

// Make sure that CSS and images load correctly when opening this clone
pageClone.find('head').append("<base href='" + location.href + "' />");

// OPTIONAL: Remove potentially interfering scripts so the page is totally static
pageClone.find('script').remove();

htmlString = pageClone.html();

您可以删除您认为不必要的DOM的其他部分，例如支持表单（如果它位于模态窗口中）。或者，如果您希望与动态控件保持一些交互，则可以选择不删除脚本。

将该字符串发送到服务器，可以是隐藏字段，也可以是AJAX，然后在服务器端将整个批次作为HTML文件附加到支持电子邮件中。

这样做的好处是，您不仅可以获得屏幕截图，还可以获得当前形式的整个可滚动页面，还可以检查和调试DOM。

Answer 10

打印屏幕？老学校和几个按键，但它的工作原理！

Answer 11

在JavaScript中？不，我确实为一家安全公司工作（有点像NetNanny类型的东西），我们发现用户屏幕捕获的唯一有效方法是使用隐藏的应用程序。

Answer 12

这可能不适合您，但在IE上您可以使用snapsie插件。它似乎不再处于开发阶段，但最后一个版本可以从链接的站点获得。

Answer 13

我需要一个activeX控件。没有它我无法想象。您可以强制用户在客户端上安装后首先安装它们activex控件应该可以工作，并且您可以捕获。

Answer 14

我们暂时收集Ajax状态，表单字段和会话信息中的数据。然后我们在支持台重新渲染它。由于我们针对所有浏览器进行测试和集成，因此几乎没有任何支持案例可用于显示原因。

查看holidaycheck

底部的红色按钮

另外还有Google的html2canvas。但它只适用于从不浏览器，我从未尝试过。

Answer 15

也许http://html2canvas.hertzen.com/可以使用。然后你可以捕获显示然后处理它。

通过JavaScript（或其他）获取浏览器的屏幕截图

15 个答案: