从html2canvas库保存结果

Question

我使用html2canvas库来使用jvascript获得html内容的屏幕快照。这就是html2canvas库所做的。

我试图做的是从html2canvas库中获取输出的屏幕快照，并以任何图像格式(例如jpeg)保存它。但没能做到。下面是我迄今为止尝试过的：

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

Answer 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/

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