javascript - html2canvas 教程？

Question

我想使用 html2canvas 但我不知道如何。

没有冒犯 Hertzen，他编写了一个很棒的脚本，但文档不完整，所以它相当没用。

我查看了 JSFeedback，但整个脚本（我不得不从 HTML 源代码中“窃取”）仅适用于他的 html2canvas 版本，在评论中，他说尚未准备好开源。

任何帮助将不胜感激 - Apparatix。

Answer 1

试一试——

在您的 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'));
            }
        });

Answer 2

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

<img src=imgdataurl>

或通过 javascript/jquery 设置背景图像，如下所示——

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

如果它对您不起作用，则可能是您指定了不正确的父 DOM 元素——您可以尝试使用 $('body') 而不是 $('#myObj') 并查看是否出现任何问题。