All geek questions in one place

Html2canvas - no screenshots for iframe

I have a task when I need to upload a URL (eg www.yahoo.com) on my web page and take a screenshot. I use html2canvas for a screenshot and adding it to the body of the page.

The page indicated by the URL successfully loads in the iframe inside the div element. But when I try to take a screenshot, the iframe area is empty.

Below is the code for previewURL and 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); } }); };

And the HTML part goes here:

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

The screenshot looks something like this: enter image description here

I am stuck and do not understand why this is happening. I want something similar to this one that can load a url and then onclick can give me a screenshot.

+4
source share
2 answers

The problem here is that you are incorrectly pointing to the part of the iframe that you want to take a screenshot of, instead you are pointing directly to the body of the document.

You can try this:

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

Hope this helps!

+5
source

This seems to be impossible:

The script does not display plugin content such as Flash or Java applets. It also does not display iframe content.

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

0
source

Source: https://habr.com/ru/post/1501621/

More articles:


All Articles