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

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

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

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

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

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

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

как загрузить скриншот с помощью html2canvas?

мое идеальное решение продемонстрирует, как создать скриншот с минимальным кодом. (Скопировать html на холст. получить строку toDataURL. выход string)

любое понимание очень ценится =)

17
html html2canvas javascript screenshot

5 ответов

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

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

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

удачи!

19

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

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

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

window.open(img);
12

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

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

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

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

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

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

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

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

8

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

создание кнопки 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>

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

1