javascript-html2canvas-iframe没有截图

bug学弟 lv.1

发布时间：2022-05-09 18:44:42 279

相关标签： # 前端

我有一个任务，我需要加载一个URL(e.g www.yahoo.com)，然后截图。我正在使用html2canvas进行屏幕截图，并将其附加到页面正文中。

URL指定的页面已成功加载到div元素内的iframe中。但当我试图截图时，iframe区域变成空白。

下面是代码previewURL和screenshot.

//to preview the URL content
function previewUrl(url,target){
    //use timeout coz mousehover fires several times
    clearTimeout(window.ht);
    window.ht = setTimeout(function(){
    var div = document.getElementById(target);
    div.innerHTML = '<iframe style="width:100%;height:100%;" frameborder="0" src="' + url + '" />';
    },20);      
}

function pic() {
      html2canvas(document.body, {
      onrendered: function(canvas) {
          document.body.appendChild(canvas);
         }
     });
 };

HTML部分在这里：

<body>
    <input type="button" class="clear-button" onclick="pic();" value="Take Screenshot" >
    <a href="http://www.yahoo.com" onmouseover="previewUrl(this.href,'div1')">Hover to load</a>
    <div id="div1"></div>

</body>

我被卡住了，不明白为什么会这样。我想要与此类似的东西，它可以加载 URL，然后 onclick 可以给我截图。

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。