Question

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

的URL

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

现在如何拍摄截图并在另一页上显示截图图片？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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的null原始iframe禁用对内部iframe的访问...

是否可以使用html2canvas获取URL的屏幕截图？

1 个答案: