html2canvas - нет скриншотов для iframe

У меня есть задача, когда мне нужно загрузить URL-адрес (e.g www.yahoo.com), на мою веб-страницу и сделать снимок экрана. Я использую html2canvas для скриншота и добавляю его в тело страницы.html2canvas - нет скриншотов для iframe

Страница, указанная по URL-адресу, успешно загружается в iframe внутри элемента div. Но когда я пытаюсь сделать снимок экрана, область 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>

скриншот выглядит примерно так: enter image description here

Я застрял и не понимаю, почему это происходит. Я хочу что-то похожее на this, которое может загружать URL-адрес, а затем onclick может дать мне скриншот.

источник

2013-09-11 roger_that

, как холст подлежит же политику происхождения, вы должны Proxify его на стороне сервера, так же, как ваша размещена ссылка работает –

Как мы достигаем этого? Пример или что-то было бы полезно. –

Вы не можете сделать это с помощью html2canvas. Об этом говорится в документации. –

Проблема заключается в том, что вы не указываете правильно на часть iframe, которую вы хотите снять с экрана, вместо этого вы указываете непосредственно на тело документа.

вы можете попробовать это:

var body = $(iframe).contents().find('body'); 
     html2canvas(body, { 
      onrendered: function(canvas) { 
       $("#content").empty().append(canvas); 
      },

Надеется, что это помогает!

источник

2014-07-04 17:15:03

Похоже, что это не представляется возможным:

Скрипт не делает плагин контента, таких как флэш-памяти или Java-апплетов. Он также не отображает содержимое iframe.

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

источник

2017-09-14 20:53:45 icl7126

html2canvas - нет скриншотов для iframe

ответ

Смежные вопросы