create screenshot of webpage using html2canvas (unable to initialize properly)

mattyd picture mattyd · May 5, 2012 · Viewed 54.4k times · Source

I am attempting to use http://html2canvas.hertzen.com/ to take screenshots of my webpage. I am unable to initialize a canvas element using...

var canvas = $('body').html2canvas();

If I were able to get a proper canvas I would follow with something like

var dataUrl = canvas.toDataURL(); //get's image string
window.open(dataUrl);             // display image

Unfortunately, the documentations is very limited IMO. http://html2canvas.hertzen.com/documentation.html . I do not believe I need to preload as I am not using any dynamic graphics(but am not even getting that far anyways)

I am simply too noob to understand if this guy is having success with screen capturing using html2canvas

I don't seem to be getting any farther than this fellow.. How to upload a screenshot using html2canvas?

My ideal solution would demonstrate how to create screenshot with minimal code. (Copy html to canvas. get toDataURL string. output string)

ANY insight is GREATLY appreciated =)

Answer

Slavik Meltser picture Slavik Meltser · May 10, 2012

You should use it this way:

$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL();
window.open(img);

It took me few hours to figure it out, how to use it the right way. The {elements:{length:1}} is required, due to incomplete implementation of the plugin, otherwise you'll get an error.

Good luck!