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

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



Google Feedback Tool Screenshotскриншот Джейсона Смолла, опубликованный в дублировать вопрос.



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

1562   3  

3 ответов:

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

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

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

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

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

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

edit Скрипт html2canvas теперь доступен отдельно здесь и примеры здесь.

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

1023  
2018-09-20 12:16:47

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

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

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

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

55  
2016-05-17 13:09:58

как Никлас упомянуть можно использовать 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 после получения изображения в качестве данных-uri вы можете показать его пользователю и позволить ему нарисовать" область ошибок " с помощью мыши, а затем отправить скриншот и координаты региона на сервер.

5  
2018-09-21 14:11:06

Comments

    Ничего не найдено.
Click here to cancel reply.