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中,您可以编码(用有效的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'));
            }
        });

Answer 2

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

<img src=imgdataurl>

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

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

如果它不适合您，则可能是您指定了不正确的父 DOM 元素 - 您可以尝试 $('body') 而不是 $('#myObj') 并查看是否出现任何情况。