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

Google " сообщить об ошибке "или" инструмент обратной связи " позволяет выбрать область окна браузера, чтобы создать скриншот, который представляется с обратной связью об ошибке.

Google Feedback Tool Screenshotскриншот от Jason Small, размещенный в дублировать вопрос.

как они это делают? API обратной связи JavaScript Google загружается из здесь и их обзор модуля обратной связи будет демонстрировать возможность скриншота.

3 ответов


JavaScript может читать DOM и отображать довольно точное представление этого, используя canvas. Я работаю над сценарием, который преобразует HTML в изображение холста. Решил сегодня сделать его реализацию в отправке обратных связей, как вы описали.

скрипт позволяет создавать формы обратной связи, которые включают скриншот, созданный в браузере клиента, вместе с формой. Скриншот основан на DOM и как таковой не может быть 100% точным для реального представление, как это не делает фактический скриншот, но строит скриншот на основе информации, доступной на странице.

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

все еще довольно ограниченная совместимость браузера (не потому, что больше не может быть поддержано, просто не было времени, чтобы сделать его более кросс-браузером).

для получения дополнительной информации ознакомьтесь с примерами здесь:

http://hertzen.com/experiments/jsfeedback/

редактировать Скрипт html2canvas теперь доступен отдельно здесь и примеры вот!--15-->.

Изменить 2 Еще одно подтверждение того, что Google использует очень похожий метод (на самом деле, на основе документации, единственное существенное различие-их асинхронный метод обхода/рисования), можно найти в этой презентации Эллиота Спрена из команды обратной связи Google: http://www.elliottsprehn.com/preso/fluentconf/


теперь ваше веб-приложение может сделать "родной" скриншот всего рабочего стола клиента с помощью getUserMedia():

посмотрите на этот пример:

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

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


As Никлас упомянуть можно использовать html2canvas библиотека, чтобы сделать снимок экрана с помощью браузера js . Я разработаю ответ в этом пункте и предоставлю пример создания скриншота с помощью этой библиотеки (в этом кадре вопроса):

function report() {
  let region = document.querySelector("body"); // whole screen
  html2canvas(region, {
    onrendered: function(canvas) {
      let pngUrl = canvas.toDataURL();
      let img = document.querySelector(".screen");
      img.src = pngUrl; // pngUrl contains screenshot graphics data in url form

      // 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>

на на onrendered после получения изображения в виде data-uri вы можете показать его пользователю и позволить ему рисовать" область ошибок " мышью, а затем отправить скриншот и координаты региона на сервер.