Login/Register
html2canvas - no screenshot for iframe
Asked Answered
javascriptjqueryiframewebpage-screenshothtml2canvas
W

3

10

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.

Westfalen answered 11/9, 2013 at 9:15 Comment(3)
as canvas is subject to same origin policy, you have to proxify it server side, just like your posted link works – Gastroenteritis
How do we achieve that? An example or something would be beneficial. – Westfalen
You can't do that with html2canvas. It says so in the documentation. – Coffle
I
8

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!

Iritis answered 4/7, 2014 at 17:15 Comment(2)
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. – Diggings
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. – Diggings
T
4

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

Tubuliflorous answered 14/9, 2017 at 20:53 Comment(1)
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. – Diggings
D
1

This code worked 4 me:

setTimeout(() => {
    html2canvas($('#'+idd2).contents().find('body')[0], {
        allowTaint : true,
        logging: true,
        profile: true,
        useCORS: true
        }).then(function(canvas) {
        document.getElementById('screen').appendChild(canvas);     
    }); }, 3000);
Dubiety answered 6/5, 2022 at 23:35 Comment(1)
I can't see how that could work. $('#'+idd2).contents().find('body')[0] looks like it is trying to read the iframe, which is going to error because the iframe in the question is cross-origin. – Upswell

© 2022 - 2024 — McMap. All rights reserved.