Создать скриншот веб-страницы с помощью html2canvas (не удалось правильно инициализировать)

Я пытаюсь использовать http://html2canvas.hertzen.com/, чтобы делать скриншоты моей веб-страницы. Я не могу инициализировать элемент холста, используя...

var canvas = $('body').html2canvas();

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

var dataUrl = canvas.toDataURL(); //get image string
window.open(dataUrl);             // display image

К сожалению, документация очень ограничена ИМО. http://html2canvas.hertzen.com/documentation.html. Я не верю, что мне нужно предварительно загружать, поскольку я не использую динамическую графику (но я даже не так далеко продвигаюсь)

Я просто слишком нуб, чтобы понять, имеет ли этот парень успех с захватом экрана с использованием html2canvas

Кажется, я не становлюсь дальше, чем этот парень. Как загрузить скриншот с помощью html2canvas?

Мое идеальное решение продемонстрировало бы, как создать скриншот с минимальным кодом. (Скопируйте html в canvas. Get toDataURL string. Строка вывода)

ЛЮБОЕ понимание прочно ценится =)

Ответ 1

Вы должны использовать его так:

$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL();
window.open(img);

Мне потребовалось несколько часов, чтобы понять это, как правильно использовать его. {elements:{length:1}} требуется, из-за неполной реализации плагина, в противном случае вы получите сообщение об ошибке.

Удачи!

Ответ 2

Вы также можете использовать следующее:

var html2obj = html2canvas($('body'));

var queue  = html2obj.parse();
var canvas = html2obj.render(queue);
var img = canvas.toDataURL();

window.open(img);

Ответ 3

Чтобы просто получить часть страницы, вы можете использовать ее следующим образом:

$('#map').html2canvas({
onrendered: function( canvas ) {
  var img = canvas.toDataURL()
  window.open(img);
}

Ответ 4

Это то, что сработало для меня.

html2canvas(document.body, {
   onrendered: function(canvas) {
     var img = canvas.toDataURL()
     window.open(img);
  }
});

Это создало новое окно для снимка экрана.

Мне нужно только часть моей страницы на скриншоте, в частности, контейнер div. Поэтому я сделал следующее:

html2canvas($('#myDiv'), {
   onrendered: function(canvas) {
     var img = canvas.toDataURL()
     window.open(img);
  }
});

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

Ответ 5

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

создание кнопки html

<button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px; padding:2px 4px 1px 4px" onclick="genScreenshot()"><span class="glyphicon glyphicon-envelope"></span></button>
<a id="test"></a>
<div id="box1"></div>

определение функции

<script type="text/javascript">                         
function genScreenshot() {
html2canvas(document.body, {
  onrendered: function(canvas) {
  $('#box1').html("");

  if (navigator.userAgent.indexOf("MSIE ") > 0 || 
                navigator.userAgent.match(/Trident.*rv\:11\./)) 
        {
    var blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob,'Test file.png');
  }
  else {
    $('#test').attr('href', canvas.toDataURL("image/png"));
    $('#test').attr('download','screenshot.png');
    $('#test')[0].click();
  }


  }
});
}  
</script>

note. Я создал кнопку html, где я вызвал функцию. test является атрибутом, а box1 - для получения элементов холста.