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

我正试图用它来截图我的网页。我无法使用初始化画布元素

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

如果我能得到一张合适的画布，我会用下面的东西

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

不幸的是，文件资料非常有限。我不认为我需要预加载，因为我没有使用任何动态图形（但我甚至没有走那么远）

我实在是太傻了，无法理解这家伙是否在这方面取得了成功

我似乎没有比这家伙走得更远。。

我的理想解决方案是演示如何用最少的代码创建屏幕截图。（将html复制到canvas.get-toDataURL string.output string）

---

非常感谢您的任何见解=）

您应该这样使用它：

我花了几个小时才弄明白，如何正确使用它。

{elements:{length:1}}

是必需的，因为插件的实现不完整，否则会出现错误

---

祝你好运

您还可以使用以下内容：

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

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

window.open(img);

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

---

要仅获取页面的一部分，您可以通过以下方式使用它：

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

---

这就是我的工作

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

这为屏幕截图创建了一个新窗口

我只想在屏幕截图中看到我页面的一部分，特别是一个容器分区。因此我做了以下工作：

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

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

window.open(img);

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

---

对于查找同一问题的人，如果上述选项没有帮助，希望会有帮助。

您可以使用以下代码捕获屏幕截图并下载屏幕截图

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>

功能定义

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

函数：Creenshot（）{
html2canvas（document.body{
onrendered：函数（画布）{
$（'#box1'）.html（“”）；
如果（navigator.userAgent.indexOf（“MSIE”）>0 | |
navigator.userAgent.match（/Trident.*rv \：11\。/）
{
var blob=canvas.msToBlob（）；
msSaveBlob（blob，'testfile.png'）；
}
否则{
$（'#test'）.attr（'href'，canvas.toDataURL（“image/png”）；
$（'#test'）.attr（'download'，'screenshot.png'）；
$（'#test'）[0]。单击（）；
}
}
});
}  

---

注意：我创建了一个html按钮，在这里调用了函数

test

是一个属性，

box1

用于获取画布元素。

我试图获取一个div，比如“$（“#myDiv”）.html2canvas（）；”但我一直在获取整个屏幕。我如何解决这个问题？必须定义元素的位置和大小，您如何定义它？类似这样的东西

如何获取屏幕截图特定divcontent@srini使用另一个选择器，而不是像

var html2obj=html2canvas（$（'#any'））这样的主体我得到了这个错误：html2obj.parse不是一个函数。在这个场景中，如何传递选项？（即，如果要打开日志记录或调整超时。