9

(e.g www.yahoo.com)Web ページにURL をロードし、スクリーンショットを撮る必要があるタスクがあります。スクリーンショットに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でスクリーンショットを取得できます。

4

2 に答える 2

2

不可能のようです：

このスクリプトは、Flash や Java アプレットなどのプラグイン コンテンツをレンダリングしません。iframe コンテンツもレンダリングしません。

http://html2canvas.hertzen.com/documentation.html#limitations

于 2017-09-14T20:53:45.450 に答える