HTML String in Html2Canvas

javascript html canvas html2canvas

12,679

Solution 1

You can do as following

var iframe=document.createElement('iframe');
$('body').append($(iframe));
setTimeout(function(){
    var iframedoc=iframe.contentDocument||iframe.contentWindow.document;
    $('body',$(iframedoc)).html('<html><head></head><body><p>HI</p></body></html>');
    html2canvas(iframedoc.body, {
        onrendered: function(canvas) {
            $('body',$(document)).append(canvas);
            $('body',$(document)).remove(iframe);
        }
    });
}, 10);

See the whole code here :

DEMO

Solution 2

Usually html2canvas renders DOM elements and not html code. But you can create a temporary iFrame, let your html render in that iFrame, and then give the generated DOM to html2canvas.

You find an example in this jsfiddle to play around, or here for your convenience:

var html_string = "<html><head></head><body><p>HI</p></body></html>";
var iframe=document.createElement('iframe');
document.body.appendChild(iframe);
setTimeout(function(){
    var iframedoc=iframe.contentDocument||iframe.contentWindow.document;
    iframedoc.body.innerHTML=html_string;
    html2canvas(iframedoc.body, {
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
            document.body.removeChild(iframe);
        }
    });
}, 10);

12,679

Author by

Manak Kapoor

Updated on July 21, 2022

Comments

Manak Kapoor almost 2 years
How do we pass a valid HTML String into html2canvas?

e.g
```
var html = "<html><head></head><body><p>HI</p></body></html>
```
The way it is done on http://html2canvas.hertzen.com/screenshots.html

Html2canvas is really great and all but it's very poorly documented.
Abdennour TOUMI almost 8 years

i update this DEMO link today, since CDN htm2canvas.js became down.. so i add anthoer link for html2canvas.js
Tigran Babajanyan over 6 years

Do you have any idea, what can i do if i won't to put html in document(even hidden)
Ajay over 5 years

receiving an error (defaultView is null) on passing iframedoc.body to html2canvas().