Javascript 使用 html2canvas 创建网页截图（无法正确初始化）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10457608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
create screenshot of webpage using html2canvas (unable to initialize properly)
提问by mattyd
I am attempting to use http://html2canvas.hertzen.com/to take screenshots of my webpage. I am unable to initialize a canvas element using...
我正在尝试使用http://html2canvas.hertzen.com/来截取我的网页。我无法使用...初始化画布元素
var canvas = $('body').html2canvas();
If I were able to get a proper canvas I would follow with something like
如果我能够得到一个合适的画布，我会跟随类似的东西
var dataUrl = canvas.toDataURL(); //get's image string
window.open(dataUrl); // display image
Unfortunately, the documentations is very limited IMO. http://html2canvas.hertzen.com/documentation.html. I do not believe I need to preload as I am not using any dynamic graphics(but am not even getting that far anyways)
不幸的是，IMO 的文档非常有限。http://html2canvas.hertzen.com/documentation.html。我不相信我需要预加载，因为我没有使用任何动态图形（但我什至没有走那么远）
I am simply too noob to understand if this guy is having success with screen capturing using html2canvas
我太菜了，无法理解这个人是否在使用 html2canvas 的屏幕捕获方面取得了成功
I don't seem to be getting any farther than this fellow.. How to upload a screenshot using html2canvas?
我似乎没有比这个家伙走得更远.. 如何使用 html2canvas 上传屏幕截图？
My ideal solution would demonstrate how to create screenshot with minimal code. (Copy html to canvas. get toDataURL string. output string)
我的理想解决方案将演示如何使用最少的代码创建屏幕截图。（将 html 复制到画布。获取 toDataURL 字符串。输出字符串）
ANY insight is GREATLY appreciated =)
非常感谢任何见解=)
回答by Slavik Meltser
You should use it this way:
你应该这样使用它：
$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL();
window.open(img);
It took me few hours to figure it out, how to use it the right way.
The {elements:{length:1}}is required, due to incomplete implementation of the plugin, otherwise you'll get an error.
我花了几个小时才弄清楚如何正确使用它。将{elements:{length:1}}是必需的，由于不完全执行的插件，否则你会得到一个错误。
Good luck!
祝你好运！
回答by Aley
You could also use the following:
您还可以使用以下内容：
var html2obj = html2canvas($('body'));
var queue = html2obj.parse();
var canvas = html2obj.render(queue);
var img = canvas.toDataURL();
window.open(img);
回答by Niklas Hoesl
To just get a part of the page you can use it this way:
要获得页面的一部分，您可以通过以下方式使用它：
$('#map').html2canvas({
onrendered: function( canvas ) {
var img = canvas.toDataURL()
window.open(img);
}
回答by ckpepper02
This is what worked for me.
这对我有用。
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
This created a new window for the screenshot.
这为屏幕截图创建了一个新窗口。
I only wanted a portion of my page in the screenshot, specifically a container div. So I did the following:
我只想要屏幕截图中页面的一部分，特别是容器 div。所以我做了以下事情：
html2canvas($('#myDiv'), {
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
For people looking up the same question, if the above options don't help, hopefully this will.
对于查找相同问题的人，如果上述选项没有帮助，希望这会有所帮助。
回答by User1493
You can use the following code to capture a screenshot and download the screenshot.
您可以使用以下代码截取屏幕截图并下载屏幕截图。
html button creation
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>
function definition
功能定义
<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>
note: I have created a html button where I have called the function. testis an attribute and box1is to get the canvas elements.
注意：我创建了一个 html 按钮，我在其中调用了该函数。test是一个属性，box1用于获取画布元素。
