html2canvas教程？

Question

我想用html2canvas，但我不知道怎么用。

无意冒犯Hertzen，他写了一个很棒的脚本，但是文档并不完整，所以它是相当无用的。

我看了看JSFeedback，但整个脚本(我不得不从HTML源中“窃取”)只适用于他的html2canvas版本，他在评论中说，它还没有做好开源的准备。

我们将非常感谢您的帮助-- Apparatix。

Answer 1

html2canvas基本上接受您指定的DOM对象中的所有内容--所有子对象及其子对象等--并根据它们的各种特征(包括边界、内容、样式等)将它们复制到一个Canvas对象(在传递给函数的Canvas变量中)。canvas.toDataURL()将该canvas的内容转换为表示可用作标记中的src的图像的字符流，即

<img src=imgdataurl>

或者通过javascript/jquery设置背景图像，就像这样--

$('#someDiv').css('background-image','url('+imgdataurl+')')

如果它对您无效，则可能是您指定的父DOM元素不正确--您可以尝试$('body')而不是$('#myObj')，看看是否出现了什么问题。

Answer 2

试一试--

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

最后两个可以从https://github.com/downloads/niklasvh/html2canvas/v0.34.zip下载

然后，您可以在Javascript中编写代码(将#myObjectId替换为有效的JQuery选择器)：

$('#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'));
            }
        });