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变量中找到）中复制它们，包括边框，内容，样式等.skin.toDataURL（）将该Canvas的内容转换为表示可用作标记中src的图像的字符流，即

<img src=imgdataurl>

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

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

如果它不适合您，可能是您指定了一个不正确的父DOM元素 - 您可以尝试$（'body'）而不是$（'＃myObj'）并查看是否有任何问题起来。

html2canvas教程？

2 个答案: