Convert HTML to Image in Jquery [Div or Table to jpg/ png]

jQuery HTML to Image Converter: This article explains how to convert div to an image in jquery. Yes, we are going to generate an image from our HTML page on client-side using jQuery. We can also convert a particular part of our Webpage ( C# Web project/ PHP). All we need HTML tag, and using html2canvas js library we can create images .i.e converting HTML table to Image PNG, JPG or converting DIV, UL, LI tag into Jpg image format. In short using html2canvas will render HTML to Images.

Where the use of converting HTML to image / picture?

As we know HTML5 gives some excellent feature, for example, we have a Canvas tag on our web page. Now on HTML 5 Canvas, we draw something or let say we create a pie chart using jquery, after that we want to save this as an Image may be in png or jpg format. We convert Canvas to Image at client-side and later save it on our server. Another example, which I have implemented in my C# web project where I had to add multiple images and then drag/shuffle all the images inside a canvas then save and upload this image using jQuery ajax, and give the print command to make Mug Sticker, tShirt Sticker. The idea behind it is to let the user add his / her photos. Allow them to arrange or to shuffle it. Later on, save button click using Jquery HTML canvas save the image which will send for printing purpose. Now let’s head towards the coding part and see how we can convert HTML to Picture 🙂 Example: Render HTML to Image in JQuery

Step to render HTML to Image [PNG/JGP] using jQuery

  1. Download and import HTML2Canvas jquery files.
  2. Add HTML markup.
  3. jQuery Code: Button click convert HTML to Canvas.
  4. jQuery Code: Download HTML to IMAGE.


# Download and import HTML2Canvas files.

First we need to download and import latest jquery library in our web page. You can import your server hosted jQuery file, or you can also use from the Google-hosted site (recommended). For convert HTML to Image, we need to import one more js library, and it is HTML2CANVAS download it and import into the HTML head tag. Now we are done with downloading, so our final head tag looks like as shown below.

# Add HTML markup (HTML element for which we create image)

Let make this article very simple, so now am adding some dummy HTML elements i.e. P tag, but you can add dynamic HTML using jQuery ajax for which you want to generate images. Now we add button tag which creates Image of specific HTML and a download button. On download button click images gets downloaded on your local drive. 1st we create a canvas of our HTML elements and then download it to the local drive as a picture, all this done at client-side using jquery. HTML MARKUP:

#Button click convert HTML to Canvas:

As you see, we have added a preview button. Now on preview button click using HTML2Canvas will render our HTML to Canvas. Code looks like as written below:

The above-written jquery code will create a canvas and append it to our div container for preview purpose. Try It Yourself ⇒

# jQuery: Download HTML to IMAGE:

Here we are ready with our canvas now we just need to download it as Image format. On download button click will convert canvas to png image format you can set any image format. Here’s the code for downloading.

Try It Yourself ⇒


Render HTML to Image in JQuery

Conclusion:  Here’s an easy way to render HTML to image like PNG. As its easy to create an image from canvas. But to render standard HTML elements like DIV, UL, LI, Table, P tags to an image we use HTML2Canvas Js library. Using HTML2Canvas will can take the screenshot of our HTML web pages. You can also check these articles:

  1. An easy way to upload bulk images in c#.
  2. Upload and resize the image in using dropzone js.
  3. Preview Image before upload it with jQuery in

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!



  1. Thanks for the explanation! Just wondering does this code works on iOS? Cause i am trying to make a mobile application where there’s this button and the button can save image and save it to camera roll.
    Many thanks!

  2. Excellent Tutorial. Its working great in chrome and firefox, but In safari9.1, I’m not able to download the png., it get base64. Please help me how to solve this issue….

  3. Excellent Tutorial. Its working great in chrome and firefox, but In Internet Explorer 11 I’m not able to download the image… Please help me how to solve this issue…..

  4. Excellent Tutorial. Its working great in chrome and firefox, but In Internet Explorer 11 I’m not able to download the image… Please help me how to solve this issue….