Google "Сообщить об ошибке" или "Инструмент обратной связи" позволяет вам выбрать область вашего окна браузера, чтобы создать скриншот, который отправляется с отзывами об ошибке.
Снимок экрана Джейсона Малого, размещенный в повторяющемся вопросе.Суб >
Как они это делают? API обратной связи Google JavaScript загружается из здесь и их обзор модуля обратной связи продемонстрирует возможность скриншотов.
JavaScript может читать DOM и отображать довольно точное представление об этом с помощью canvas. Я работал над сценарием, который преобразует HTML в изображение холста. Решил сегодня внедрить его в отправку отзывов, как вы описали.
Сценарий позволяет создавать формы обратной связи, которые включают в себя скриншот, созданный в браузере клиента, вместе с формой. Снимок экрана основан на DOM и, как таковой, может не быть на 100% точным к реальному представлению, поскольку он не создает фактического снимка экрана, а создает снимок экрана на основе информации, доступной на странице.
Не требует рендеринга с сервера, так как все изображение создается в браузере клиента. Сам скрипт HTML2Canvas все еще находится в очень экспериментальном состоянии, так как он не анализирует почти столько атрибутов CSS3, сколько я хотел бы, ни поддерживает загрузку изображений CORS, даже если прокси-сервер был доступен.
Все еще довольно ограниченная совместимость браузера (не потому, что больше не может быть поддержано, просто не было времени сделать его более кросс-браузерным).
Для получения дополнительной информации посмотрите примеры здесь:
http://hertzen.com/experiments/jsfeedback/
edit Сценарий html2canvas теперь доступен отдельно здесь и некоторые примеры здесь.
edit 2 Еще одно подтверждение того, что Google использует очень похожий метод (на самом деле, основываясь на документации, единственным существенным отличием является их асинхронный метод обхода/рисования), можно найти в этой презентации Эллиотта Спрена из команды Google Feedback: http://www.elliottsprehn.com/preso/fluentconf/
Теперь ваше веб-приложение может использовать "собственный" снимок экрана для всего рабочего стола клиента, используя getUserMedia():
Взгляните на этот пример:
https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/
Клиент должен будет использовать хром (на данный момент) и должен будет включить поддержку захвата экрана под флагами chrome://.
Как упоминал Никлас, вы можете использовать библиотеку html2canvas, чтобы сделать снимок экрана с помощью JS в браузере. В этом пункте я расширю его ответ, приведя пример создания снимка экрана с помощью этой библиотеки:
function report() {
let region = document.querySelector("body"); // whole screen
html2canvas(region, {
onrendered: function(canvas) {
let pngUrl = canvas.toDataURL(); // png in dataURL format
let img = document.querySelector(".screen");
img.src = pngUrl;
// here you can allow user to set bug-region
// and send it with 'pngUrl' to server
},
});
}.container {
margin-top: 10px;
border: solid 1px black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div>Screenshot tester</div>
<button onclick="report()">Take screenshot</button>
<div class="container">
<img width="75%" class="screen">
</div>Вот пример использования: getDisplayMedia
document.body.innerHTML = '<video style="width: 100%; height: 100%; border: 1px black solid;"/>';
navigator.mediaDevices.getDisplayMedia()
.then( mediaStream => {
const video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = e => {
video.play();
video.pause();
};
})
.catch( err => console.log('${err.name}: ${err.message}'));
Также стоит ознакомиться с документами API захвата экрана.