使用html2canvas创建网页的截图（无法正确初始化）使用html2canvas创建网页的截图（

我试图用http://html2canvas.hertzen.com/把我的网页截图。 我无法初始化使用canvas元素...

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

如果我能得到适当的帆布我会遵循类似

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

不幸的是，本细则是非常有限的IMO。 http://html2canvas.hertzen.com/documentation.html 。 我不认为我需要，因为我没有使用任何动态图形（但我没有得到，甚至远远反正）预加载

我简直太小白明白，如果这个人是有成功使用的屏幕捕获html2canvas

我似乎并没有得到任何比这家伙远.. 如何上传使用html2canvas截图？

我的理想的解决方案将演示如何创建用最少的代码截图。 （HTML复制到画布上。得到toDataURL字符串输出字符串）

ANY洞察非常感谢=）

Answer 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}}是必需的，由于不完全执行的插件，否则你会得到一个错误。

祝好运！

Answer 2:

您还可以使用下列内容：

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

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

window.open(img);

Answer 3:

先手，你可以使用这种方式的页面的一部分：

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

Answer 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);
  }
});

为人们寻找了同样的问题，如果上述选项没有帮助，希望这将。

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

注意 ：我创建了一个HTML按钮，我已经调用的函数。 test是一个属性， box1是让画布元素。

文章来源: create screenshot of webpage using html2canvas (unable to initialize properly)