CODEWITHSUNDEEP
javascripthtmlcanvashtml2canvas
Manak Kapoor
Manak Kapoor

Reputation: 982

HTML String in Html2Canvas

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.

Upvotes: 8

Views: 17087

Answers (2)

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93481

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

Upvotes: 9

tessi
tessi

Reputation: 13574

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

Upvotes: 13

Related Questions