HTML String in Html2Canvas

javascript html canvas html2canvas
Manak Kapoor picture Manak Kapoor · Apr 20, 2013 · Viewed 11k times · Source

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.

Answer

tessi picture tessi · Apr 20, 2013

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

Related questions

HTML2canvas generates Blurry images

I am using jsPDF and it uses html2canvas to generate an image from some html element and insert on the .pdf file. But there is a problem on html2canvas, it generates blurry images from the html. See example …

Read More
Html2Canvas Resize

I am using html2canvas in an effort to get a screenshot of a webpage and render it as a thumbnail (well, 400x300, not exactly a thumbnail). Based on the Screenshot console code, everything works great with the exception of …

Read More
HTML2Canvas converting overflowed content to image

I have a div which is pretty overflowed. It basically includes a big organization chart. What I want to do is exporting whole content of div rather than visible part with html2canvas library but I couldn't achieve it so …

Read More