使用html2canvas创建网页截图(无法正确初始化)

Question

我正在尝试使用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字符串.输出字符串)

任何见解都非常感激=)

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

对于查找相同问题的人,如果上述选项没有帮助,希望这会有所帮助.