jueves, 6 de septiembre de 2012

Screen Shot with HTML5 - JS

Have you ever tried to give users a way to take an image of the content in the browser?
Like a screenshot of the body content?

It seems so easy at first and you think "I am sure that out there must to be a function to this within the browser." Well, I have good new and bad news. When I first searched for it there was nothing like that. Then I start thinking there must to be a JS that already does this. Well again,  I searched for it I did not find anything simple to implement or a working example.

Just when I was losing all hope I found this great site. This guy make a plugin for JQuery that takes all the content of an element and put it into a canvas, and you may think why is that useful? Is useful because from canvas you can take an image! So if you apply the thml2canvas function to the body you will have all the content of your site in a canvas and from there you can take the content as an image and that's it, you get your screen shot.

Let see the example working:

Here you can test your html code, insert some code to render and click on "insert HTML".
In this example, there is with an "a" tag with some css to make it look good. You can see the content inserted in a div, then lets click on "Go and take the Screens"
And then the process described above occurs, all html code of the body is replaced by just single image in base64 that represent the HTML that you had in the previews screen.

About limitations, some css3 stuff do not work, other canvas elements and object element are not supported (at lees last time that I check).

So here is the code that for you be able to play with it. I am using JQuery 1.7

No hay comentarios:

Publicar un comentario