Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 504
mattyd Avatar asked May 05 '12 00:05

mattyd


People also ask

How to take screenshot using html2canvas?

Create screenshot() function where initialize html2canvas on the body. By default, html2canvas set the image background color to black if save the screenshot. With the use of background: '#fff' set background white. Get taken screenshot image base64 URL using canvas.

What is html2canvas?

The script allows you to take “screenshots” of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.


1 Answers

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!

like image 103
Slavik Meltser Avatar answered Oct 19 '22 02:10

Slavik Meltser