Convert Div to image using jQuery, PHP & HTML Canvas

Hi Friends, It’s been a long time, so today I’m writing an interesting topic about how to capture a DIV content and save it as an image using PHP.

And I didn’t stop simply capturing any div but also giving an option to add a text with a drag option and two backgrounds to select with the help of jQuery.

If you wish to see the demo first, please go ahead and click the demo button below:




And to capture the DIV content I’m using a special Javascript developed by Niklas von Hertzen.
You can find the script and examples here, http://html2canvas.hertzen.com/

Ok lets’ begin what are the scripts.

What you should know to understand the script?
1. You should have the intermediate knowledge of jQuery and PHP.
2. And you should have the habit of reading comments in the script. 😉


Two files, index.html and save_png.php

Explore index.html:

Read the comments in the script to understand the operations.

Explore save_jpg.php:

Download the code here and learn yourself by exploring it.


About the Author


Software Engineer, Blogger etc., Visit my Youtube channel - <a href="http://www.youtube.com/agurchand">Click Here</a>

13 thoughts on “Convert Div to image using jQuery, PHP & HTML Canvas

Leave a Reply

Your email address will not be published. Required fields are marked *