從html2canvas庫保存結果

Question

我使用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 lib）

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

在您的代碼中，該函數在呈現元素之前被調用，因此它只會給您一個空白的畫布頁面。