html2canvas - no screenshot for iframe

Question

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.

as canvas is subject to same origin policy, you have to proxify it server side, just like your posted link works — A. Wolff, Sep 11 '13 at 09:26
How do we achieve that? An example or something would be beneficial. — roger_that, Sep 11 '13 at 09:45
You can't do that with html2canvas. It says so in the documentation. — Matt Ellen, Jun 13 '14 at 11:27

score 9 · Answer 1 · edited May 07 '22 at 00:30

9

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!

edited May 07 '22 at 00:30

Lee Taylor

7,761
16
33
49

answered Jul 04 '14 at 17:15

Mario Madrigal

91
1
4

FYI, I don't think this works if the iframe is not from the same domain, due to [Same Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/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 Oct 02 '19 at 19:11
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. – John B Oct 02 '19 at 19:17

score 2 · Answer 2 · answered Sep 14 '17 at 20:53

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

answered Sep 14 '17 at 20:53

icl7126

5,740
4
53
51

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. – John B Oct 02 '19 at 18:54

Vahid Rafael · Answer 3 · 2022-05-09T12:39:44.043

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

edited May 09 '22 at 12:39

answered May 06 '22 at 23:35

Vahid Rafael

29
1
3

html2canvas - no screenshot for iframe

3 Answers3

Linked