Использование HTML5/Canvas/JavaScript для снятия скриншотов в браузере

Ответ 1

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/

Ответ 2

Теперь ваше веб-приложение может использовать "собственный" снимок экрана для всего рабочего стола клиента, используя getUserMedia():

Взгляните на этот пример:

https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

Клиент должен будет использовать хром (на данный момент) и должен будет включить поддержку захвата экрана под флагами chrome://.

Ответ 3

Как упоминал Никлас, вы можете использовать библиотеку 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>

Ответ 4

Вот пример использования: 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 захвата экрана.