![](/img/trans.png)
[英]Capture the screenshot of a webpage using html2canvas with png extension
[英]create screenshot of webpage using html2canvas (unable to initialize properly)
我正在尝试使用http://html2canvas.hertzen.com/截取我的网页。 我无法使用...初始化 canvas 元素
var canvas = $('body').html2canvas();
如果我能够得到一个合适的 canvas 我会跟随类似的东西
var dataUrl = canvas.toDataURL(); //get's image string
window.open(dataUrl); // display image
不幸的是,IMO 的文档非常有限。 http://html2canvas.hertzen.com/documentation.html 。 我不相信我需要预加载,因为我没有使用任何动态图形(但我什至没有得到那么远)
我太菜鸟了,无法理解这个人是否在使用 html2canvas 进行屏幕捕获方面取得了成功
我似乎没有比这家伙更进一步了。 如何使用 html2canvas 上传屏幕截图?
我理想的解决方案将演示如何使用最少的代码创建屏幕截图。 (将html复制到canvas。得到toDataURL字符串。output字符串)
非常感谢任何见解 =)
你应该这样使用它:
$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL();
window.open(img);
我花了几个小时来弄明白,如何以正确的方式使用它。 {elements:{length:1}}
是必需的,因为插件的实现不完整,否则你会收到错误。
祝好运!
您还可以使用以下内容:
var html2obj = html2canvas($('body'));
var queue = html2obj.parse();
var canvas = html2obj.render(queue);
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);
}
});
这为截图创建了一个新窗口。
我只想在截图中看到我页面的一部分,特别是容器div。 所以我做了以下事情:
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>
注意 :我已经创建了一个html按钮,我调用了该函数。 test
是一个属性, box1
是获取canvas元素。
我已经尝试过这种方式,对我来说效果很好,你也可以试试这个。 https://github.com/vijayowork/screenshot-of-div-using-javascript 。
我使用 domtoimage 方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.