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

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

Любые (сумасшедшие) идеи?

Ответ 1

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

Однако это возможно сделать за пределами JavaScript. Я разработал приложение Swing, которое использовал код захвата экрана, такой как этот, который отлично поработал, отправив электронное письмо в службу поддержки с прикрепленным скриншотом всякий раз, когда пользователь столкнулся с RuntimeException.

Я полагаю, вы могли бы экспериментировать с подписанным Java-апплетом (shock! horror! 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));
}
...

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

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

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

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

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

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

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

Эй, это может сработать! Я ввязываюсь: -)

НТН

- pete

Ответ 5

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

настройте отдельный сервер для скриншотов и запустите кучу экземпляров firefox там, проверьте эти два камня, если вы делаете это в ruby: selenium-webdriver и headless
используйте размещенное решение, например http://url2png.com (проще)

Ответ 6

Пожалуйста, см. ответ, который был приведен здесь для относительно успешной реализации этого: fooobar.com/questions/7725/...

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

Ответ 7

Вы можете попробовать 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();
});

Ответ 8

Я понимаю, что этой должности 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.

Ответ 9

Экран печати? Старая школа и несколько нажатий клавиш, но она работает!

Ответ 10

В JavaScript? Нет. Я работаю в компании безопасности (вроде типа типа NetNanny), и единственным эффективным способом, который мы нашли, чтобы сделать скриншоты пользователя, является скрытое приложение.

Ответ 11

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

Ответ 12

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

Ответ 13

Мы временно собираем состояния Ajax, данные в полях формы и информации о сеансе. Затем мы переориентируем его в службу поддержки. Поскольку мы тестируем и интегрируем для всех браузеров, вряд ли есть какие-либо случаи поддержки для показа.

Посмотрите на красную кнопку внизу holidaycheck

В качестве альтернативы существует html2canvas Google. Но он применим только для браузеров, и я никогда не пробовал его.

Ответ 14

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

Примечание. Я не знаю, доступна ли эта функция только для платной версии или нет.

Ответ 15

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