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

我正在尝试使用http://html2canvas.hertzen.com/截取我的网页截图。我无法初始化使用canvas元素...使用html2canvas创建网页截图（无法正确初始化）

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字符串输出字符串。）

任何有识之士非常感谢=）

来源

2012-05-05 mattyd

你应该使用这种方式：

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

我花了几个小时，以图它出来了，如何以正确的方式使用它。由于插件的不完整实现，{elements:{length:1}}是必需的，否则您会收到错误。

祝你好运！

来源

2012-05-09 23:46:42

我想抓住像“$（”＃myDiv“）。html2canvas（）;”但我一直在获取整个屏幕。我怎样才能解决这个问题？ –

元素的位置和大小必须定义为 –

，您如何定义？ – SuN

您还可以使用以下方式：

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

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

window.open(img);

来源

2012-08-30 11:50:46 Aley

如何获得截图特定的div内容 – srini

@srini使用另一个选择器而不是像'var html2obj = html2canvas（$（'＃any'））;' – Aley

这个错误：html2obj.parse是不是一个功能 – tuananh

只得到网页的一部分，你可以使用这种方式：

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

来源

2012-10-19 09:08:09

在这种情况下你会如何通过选项？（即如果您想打开日志记录或调整超时时间。 – PrivateJoker

这是对我工作。

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

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

来源

2013-04-10 15:58:50 ckpepper02

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

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

来源

2016-10-18 06:03:36

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

回答

相关问题