Можете ли вы сделать «скриншот» страницы с помощью Canvas? - PullRequest
Новая
       27

Можете ли вы сделать «скриншот» страницы с помощью Canvas?

67 голосов
/ 03 декабря 2010

У меня есть страница, где мы позиционируем группу элементов с помощью CSS и меняем их «верхнюю и левую» позиции с помощью JS.

У меня были сообщения о том, что эти вещи были смещены, но у пользователя есть мотив лгать об этом, чтобы "обмануть", поэтому я не совсем уверен, говорят ли они правду. Я пытаюсь найти способ выяснить, лгут они или нет, и получить какое-то «доказательство».

Я знаю, что в Canvas есть метод для копирования информации об изображении из элемента изображения или другого элемента canvas (тип операции BitBlt).

Можно ли каким-то образом с помощью Canvas (или с чем-то еще, Flash, что угодно) сделать «фотографию» куска страницы?
Опять же, я не пытаюсь получить информацию от <image>. Я пытаюсь скопировать то, что видит пользователь, который состоит из нескольких абсолютно расположенных HTML-элементов (и меня больше всего интересуют эти позиции), и каким-то образом загрузить это на сервер.

Я понимаю, что этого нельзя сделать, но, возможно, я что-то упускаю.

Есть идеи?

Ответы [ 7 ]

10 голосов
/ 03 декабря 2010

Кто-то ранее задавал вопрос, похожий на этот.Прокрутите до нижней части Youtube и нажмите ссылку «Сообщить об ошибке».Инструмент обратной связи Google (управляемый Javascript), по сути, делает то, что вы описали.Судя по тому, что я посмотрел на его код, он использует canvas и имеет кодировщик JPEG на основе JavaScript, который создает изображение JPG для отправки в Google.

Это определенно будет большой работой, но я 'Я уверен, что вы могли бы сделать что-то подобное.

7 голосов
/ 25 мая 2011

Если коммерческое решение является опцией, проверьте SnapEngage . Нажмите на кнопку «Справка» в правом верхнем углу, чтобы увидеть его в действии. Вот скриншот: -

enter image description here

Настройка довольно проста, вам просто нужно скопировать и вставить несколько строк кода JavaScript.

SnapEngage использует Java-апплет для создания снимков экрана, Здесь - это сообщение в блоге о том, как это работает.

3 голосов
/ 17 февраля 2014

Вы можете использовать элемент , который в настоящее время поддерживается только Firefox. 

background: -moz-element(#mysite);

Здесь #mysite - элемент, содержимое которого используется в качестве фона

Открыть в Firefox: http://jsfiddle.net/qu2kz/3/ (проверено на FF 27)

snapshot

3 голосов
/ 10 февраля 2013

Да, вы можете увидеть следующую демонстрацию В приведенном ниже коде я определил таблицу внутри тега body, но когда вы запустите этот код, он отобразит снимок изображения. 

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="js/html2canvas.js?rev032"></script> 
<script type="text/javascript">
  $(document).ready(function() {
  var target = $('body');
   html2canvas(target, {
     onrendered: function(canvas) {
     var data = canvas.toDataURL();
     alert(data);
     document.body.innerHTML="<br/><br/><br/><br/><br/><br/><img src="+data+" />";
   }
 });
});
</script>       

 </head>
 <body>  
 <h1>Testing</h1>
 <h4>One column:</h4>
 <table border="1">
 <tr>
  <td>100</td>
 </tr>
 </table>
</body>

html2canvas официальная документация: - http://html2canvas.hertzen.com/

Для загрузки библиотеки html2canvas.js вы также можете использовать ее, если не можете найти по официальной ссылке: - https://github.com/niklasvh/html2canvas/downloads [Я не несу ответственности за эту ссылку: P: P: P]

2 голосов
/ 20 февраля 2012

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

Chrome:

Я могу указать вам на мое расширение Chrome с открытым исходным кодом, Blipshot, которое делает именно это: https://github.com/folletto/Blipshot

Просто чтобы дать немного фона:

  1. Насколько я знаю, вы можете сделать это только из расширения, поскольку оно использует внутреннюю функцию.
  2. Функция chrome.tabs.captureVisibleTab и требует доступа к вкладкам из манифеста.
  3. Функция захватывает только видимую часть активной вкладки, так что если вам нужно, то это нормально. Если вам нужно нечто большее, чем, вы должны взглянуть на весь скрипт, так как довольно сложно получить полный скриншот страницы, пока Google не исправит Ошибка # 45209 .

Firefox:

В Firefox начиная с 1.5 вы можете создавать расширения, использующие пользовательское расширение canvas, drawWindow, которое является более мощным, чем chrome.tabs.captureVisibleTab эквивалент Chrome. Некоторая информация здесь: https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

2 голосов
/ 23 мая 2011

В Firefox вы можете создать AddOn, который использует canvas.drawWindow для рисования веб-контента на холсте.https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

Я не думаю, что сейчас есть способ сделать это на WebKit.

2 голосов
/ 03 декабря 2010

Я не думаю, что вы можете сделать это. Однако вы можете рекурсивно извлечь clientHeight, clientWidth, offsetTop и offsetLeft, чтобы определить позиции все элементы на странице и отправить его обратно на сервер.

...