Menu
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.
703
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);
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 :
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
