javascript html2canvas 教程？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10692468/
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
html2canvas Tutorial?
提问by apparatix
I'd like to use html2canvas but I have no idea how.
我想使用 html2canvas 但我不知道如何使用。
No offense to Hertzen, he's made a great script, but the documentation is incomplete so it's rather useless.
无意冒犯 Hertzen，他编写了一个很棒的脚本，但文档不完整，因此它毫无用处。
I looked at JSFeedback but the whole script (which I had to 'steal' from the HTML source) works only with his version of html2canvas which, in the comments, he says is unready for open-sourceness.
我查看了 JSFeedback，但整个脚本（我不得不从 HTML 源代码中“窃取”它）仅适用于他的 html2canvas 版本，在评论中，他说还没有准备好开源。
Any help will be truly appreciated - Apparatix.
任何帮助将不胜感激 - Apparatix。
采纳答案by sneuf
html2canvas basically takes everything in the DOM object you specify -- all children, and their children, etc. - and replicates them in a Canvas object (found in the canvas variable passed in to the function) based on their various characteristics, including borders, content, styles, etc. canvas.toDataURL() converts the contents of that Canvas to a stream of characters that represent an image that can be used as a src in an tag, i.e.
html2canvas 基本上获取您指定的 DOM 对象中的所有内容——所有子对象及其子对象等——并根据它们的各种特征（包括边框）将它们复制到 Canvas 对象（在传递给函数的 canvas 变量中找到）中，内容、样式等 canvas.toDataURL() 将该 Canvas 的内容转换为表示可用作标签中 src 的图像的字符流，即
<img src=imgdataurl>
or setting a background-image via javascript/jquery, like this --
或通过 javascript/jquery 设置背景图像，就像这样——
$('#someDiv').css('background-image','url('+imgdataurl+')')
If it isn't working for you, it may be that you're specifying an incorrect parent DOM element -- you can try $('body') instead of $('#myObj') and see if anything comes up.
如果它对您不起作用，则可能是您指定了不正确的父 DOM 元素——您可以尝试使用 $('body') 而不是 $('#myObj') 并查看是否出现任何问题。
回答by sneuf
Give this a whirl --
试一试——
In your index.html, add the following javascript files:
在您的 index.html 中，添加以下 javascript 文件：
<script type="text/javascript" language="javascript" src="js/jquery.js">
</script>
<script type="text/javascript" language="javascript" src="js/html2canvas.min.js">
</script>
<script type="text/javascript" language="javascript" src="js/jquery.plugin.html2canvas.js">
</script>
You can download the last two from: https://github.com/downloads/niklasvh/html2canvas/v0.34.zip
您可以从以下位置下载最后两个：https: //github.com/downloads/niklasvh/html2canvas/v0.34.zip
In your Javascript, you can then code (replace #myObjectId with a valid JQuery selector):
在您的 Javascript 中，您可以编码（用有效的 JQuery 选择器替换 #myObjectId）：
$('#myObjectID').html2canvas({
onrendered : function(canvas) {
var img = canvas.toDataURL();
// img now contains an IMG URL, you can do various things with it, but most simply:
$('<img>',{src:img}).appendTo($('body'));
}
});
