从 html2canvas 库中保存结果答案

【问题标题】：Save result from html2canvas library从 html2canvas 库中保存结果
【发布时间】：2015-12-19 23:24:20
【问题描述】：

我使用 html2canvas 库来获取使用 jvascript 的 html 内容的屏幕截图。这就是 html2canvas 库的作用。

我试图做的是从 html2canvas 库中获取输出的屏幕截图并将其保存为任何图像格式（比如 jpeg）。但未能实现。这是我迄今为止尝试过的： HTML

<svg width="500" height="350">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<rect id="blue-rectangle" width="50" height="50" x="25" y="200"     fill="#0099cc"></rect>

<animate 
       xlink:href="#orange-circle"
       attributeName="cx"
       from="50"
       to="450" 
       dur="5s"
       begin="0s"
       repeatCount="2"
       fill="freeze" 
       id="circ-anim"/>

<animate 
       xlink:href="#blue-rectangle"
       attributeName="x" 
       from="50"
       to="425" 
       dur="5s"
       begin="0s"
       repeatCount="indefinite"
       fill="freeze" 
       id="rect-anim"/>

</svg>

CSS

    svg {
    border: 3px solid #eee;
    display: block;
    margin: 1em auto;
    }
    p {
    color: #aaa;
    text-align: center;
    margin: 2em 0;
    }

JS（带有 html2canvas 库）

<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
</script>

【问题讨论】：

标签： javascript html css html2canvas

【解决方案1】：

您唯一需要做的就是用 window.onload 包装函数

这里是例子

 window.onload = function() {
            $("#convert").click(function(){
                html2canvas($('.svgElement')).then(function(canvas) {
                var imgLink = canvas.toDataURL("image/png");
                var img = document.createElement('img');
                img.src = imgLink;
                document.body.appendChild(img);
                });
            }); 
        }

https://jsfiddle.net/t1fw7pgy/1/

在您的代码中，该函数在渲染元素之前被调用，因此它只会给您一个空白画布页面。

【讨论】：