Сделать снимок экрана браузера через JavaScript (или что-то еще)

Question

По соображениям поддержки я хочу, чтобы пользователь мог как можно проще сделать снимок экрана текущего окна браузера и отправить его на сервер.

Любые (безумные) идеи?

Answer 1

Это может показаться довольно большой дырой в безопасности JavaScript, если бы вы могли это сделать.Представьте, что злоумышленник устанавливает этот код на ваш сайт с помощью атаки XSS, а затем снимает с экрана всю вашу ежедневную работу.Представьте себе, что это происходит с вашим онлайн-банкингом ...

Тем не менее, можно делать подобные вещи вне JavaScript.Я разработал приложение 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

Пожалуйста, ознакомьтесь с ответом, приведенным здесь для относительно успешной реализации этого: https://stackoverflow.com/a/6678156/291640

Использование: https://github.com/niklasvh/html2canvas

Answer 3

Я видел, как люди делали это с двумя подходами:

1. настройте отдельный сервер для скриншотов и запустите несколько экземпляров Firefox, посмотрите эти два гема, если вы делаете это в ruby: selenium-webdriver и headless

2. используйте размещенное решение, например http://url2png.com (намного проще)

Answer 4

Мне кажется, что поддержка нуждается (как минимум) в ответах на два вопроса:

1. Как выглядит экран?и
2. Почему это выглядит так?

Скриншот - визуальный элемент - очень необходим и отвечает на первый вопрос, но не может ответить на второй.

В качестве первой попытки я бы попытался отправить всю страницу в службу поддержки.Техническая поддержка может отобразить эту страницу в своем браузере (отвечает на первый вопрос);и может также видеть текущее состояние HTML клиента (помогает ответить на второй вопрос).

Я бы попытался отправить столько страниц, сколько доступно клиентскому JS, через AJAX или как полезную нагрузку формы.Кроме того, я бы отправлял информацию не на странице: все, что влияет на состояние страницы, например файлы cookie или идентификаторы сеанса или что-либо еще.

В cust может быть кнопка подтверждения, чтобы начать процесс.

Думаю, это сработает.Давайте посмотрим: ему нужен некоторый CGI где-то на сервере, который ловит входящую пользовательскую страницу и делает ее доступной для поддержки, возможно, путем записи файла на диске.Затем специалист службы поддержки может загрузить (или загрузить автоматически) ту же страницу.Вся остальная информация (файлы cookie и т. Д.) Может быть помещена на страницу, которую видит поддержка.

PLUS: клиентский JS, который обрабатывает кнопку submit onclick (), также может включать любые полезные значения переменных JS!

Эй, это может сработать!Я схожу с ума: -)

HTH

- Пит

Answer 5

Веб-страница не может этого сделать (или, по крайней мере, я бы очень удивилась, если бы это было возможно в любом браузере), но расширение Firefox может.См. https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas - когда на этой странице написано «Права доступа Chrome», это означает, что расширение может это сделать, а веб-страница не может.

Answer 6

Вы можете попытаться отобразить всю страницу на холсте и сохранить это изображение на сервере. веселиться :) 1001 *

Answer 7

Я понимаю, что этому посту 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 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

Вы также можете сделать это с плагином 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 10

Возможно, можно использовать http://html2canvas.hertzen.com/. Затем вы можете захватить дисплей и затем обработать его.