html2canvas - no screenshot for iframe

javascript jquery iframe webpage-screenshot html2canvas

23,202

Solution 1

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

you can try this:

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

Hope this helps!

Solution 2

Seems like it's not possible:

The script doesn't render plugin content such as Flash or Java applets. It doesn't render iframe content either.

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

23,202

Author by

roger_that

Java Software Developer

Updated on July 12, 2022

Comments

roger_that almost 2 years

I have a task where i need to load a URL (e.g www.yahoo.com) , on my webpage, and take screenshot. I am using html2canvas for screenshot and appending it to the body of the page.

The page specified by the URL is successfully loaded in an iframe inside a div element. But when i try to take screenshot of that, the iframe area comes blank.

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 don't understand why is this happening. I want something similar to this which can load URL and then onclick can give me screenshot.

John B over 4 years

I think this is because this would be a major security issue. Imagine if you're able to iframe and then screenshot a user's bank's website.
John B over 4 years

FYI, I don't think this works if the iframe is not from the same domain, due to Same Origin Policy. I also wasn't even able to get this to work with the same origin, on my local file system. Maybe this would work with a proper domain.
John B over 4 years

I just tried this with Chrome and my local IIS and I'm unable to even get IFrame contents on my local test domain, or via the file system reference. $(iframe).contents().text() just returns an empty string.