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

【问题标题】：create screenshot of webpage using html2canvas (unable to initialize properly)使用 html2canvas 创建网页截图（无法正确初始化）
【发布时间】：2012-05-14 12:23:29
【问题描述】：

我正在尝试使用http://html2canvas.hertzen.com/ 截取我的网页截图。我无法使用...初始化画布元素。

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

如果我能够获得合适的画布，我会使用类似的东西

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

不幸的是，IMO 的文档非常有限。 http://html2canvas.hertzen.com/documentation.html 。我不相信我需要预加载，因为我没有使用任何动态图形（但无论如何都没有走那么远）

我太菜鸟了，不明白这家伙是否在 screen capturing using html2canvas 上取得了成功

我似乎没有比这家伙走得更远.. How to upload a screenshot using html2canvas?

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

非常感谢任何见解 =)

【问题讨论】：

标签： javascript html screenshot html2canvas

【解决方案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}}是必需的，因为插件实现不完整，否则会报错。

祝你好运！

【讨论】：

我正在尝试获取像 "$("#myDiv").html2canvas();" 这样的 div但我不断得到整个屏幕。我该如何解决这个问题？
必须定义元素的位置和大小
你如何定义它？
类似<div style="width:300px;height:300px;"></div>

【解决方案2】：

您可以使用以下代码截取屏幕截图并下载屏幕截图。

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 是获取画布元素。

【讨论】：

【解决方案3】：

您还可以使用以下内容：

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

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

window.open(img);

【讨论】：

如何截取特定的div内容
@srini 使用另一个选择器而不是像var html2obj = html2canvas($('#any'));这样的主体
我收到了这个错误：html2obj.parse 不是函数

【解决方案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】：

要获取页面的一部分，您可以这样使用它：

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

【讨论】：

在这种情况下，您将如何传递选项？（即，如果您想打开日志记录或调整超时。