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/

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

保存html2canvas库的结果

1 个答案: