javascript - 是否可以使用 html2canvas 截取 URL？

Question

下面的代码是截取当前页面的屏幕截图。 html2canvas中的url可以截图吗？我的意思是我有一个 URL 是

mydomain.com/home
mydomain.com/home?id=2
mydomain.com/home/2

现在如何截取屏幕截图并将屏幕截图图像显示在另一个页面上？

window.takeScreenShot = function() {
    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width:320,
        height:220
    });
}

#target{
    width:300px;
    height:200px;
    background:blue;
    color:#fff;
    padding:10px;
}
button{
    display:block;
    height:20px;
    margin-top:10px;
    margin-bottom:10px;
}

<div id="target">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>

<button onclick="takeScreenShot()">to image</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/build/html2canvas.js"></script>

Answer 1

您可以使用 iframe 加载您的其他文档，在其加载事件调用 html2canvas 时使用 iframe 的 contentDocument.documentElement 和 voilà。

[当然，这只适用于同源文档]

var iframe = document.createElement('iframe');
iframe.src = YOUR_SAME_DOMAIN_URL_HERE
iframe.onload = function(e) {   
  // note: this assumes html2canvas v5+
   html2canvas(iframe.contentDocument.documentElement).then(function(canvas){
     document.body.removeChild(iframe);
     doSomethingWithTheCanvas(canvas);
    });
}
// just to hide the iframe
iframe.style.cssText ='position: absolute; opacity:0; z-index: -9999';
document.body.appendChild(iframe);

As a fiddle 由于 StackSnippet 的空源 iframe 禁止访问内部 iframe...