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

/ / 58 Comments

jQuery / JavaScript HTML to Image Converter: This article explains how to convert div to an image in jQuery and also in JavaScript. Yes, we are going to generate an image from our HTML page on the client side. We can also convert a particular part of our Webpage (Asp.net C# Web project/ PHP). All we need HTML tag, and using the html2canvas javascript library we can create images .i.e converting the 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 which means now we can take the screenshot of Div or any HTML element of a web page.

Where the use of converting HTML to image/picture?

As we know HTML5 gives some excellent features, 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 that may be in png or jpg format. We convert Canvas to Image at the client-side and later save it on our server.

Another example, which I have implemented in my Asp.net C# web project where I had to add multiple images. Then drag/shuffle all the images inside a canvas to save them into one single image.

Later upload this image using jQuery ajax, and give the print command to make Mug Sticker, Tshirt Sticker, and some dynamic background with hex color code.

The idea behind it is to let the user add his / her photos. Allow them to arrange or to shuffle it. Later on, button click we allow the user to make HTML canvas save as 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: 


Video:

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

  1. Download and import HTML2Canvas jquery files.
  2. Add HTML markup.
  3. JavaScript Code to convert HTML div to Image [png]
  4. jQuery Code: Button click convert HTML to Canvas.
  5. jQuery Code: Download HTML to IMAGE.

#1 Download and import HTML2Canvas files.

First, we need to download and import the latest jquery library on our web page. You can import your server-hosted jQuery file or use it from the Google-hosted site (recommended).

For converting HTML to Image, we need to import one more javascript library, and it is HTML2CANVAS download it and import it into the HTML head tag. Now we are done with downloading, so our final head tag looks as shown below.

<script src="Scripts/jquer_latest_2.11_.min.js" type="text/javascript"></script>
<script src="Scripts/html2canvas.js" type="text/javascript"></script> 

Note: If you want to use only javascript, then no need to import the jQuery library. All you need to follow Step 2 and Step 3

#2 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 a button tag that creates an Image of specific HTML and adds a download button.

On the download button click, the images get 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 the client-side using jquery.

HTML MARKUP:

<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr />
        <h2 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h2>
        <p style="color: #3e4b51;">
            <b>Codepedia.info</b> is a programming blog. Tutorials focused on Programming ASP.Net,
            C#, jQuery, AngularJs, Gridview, MVC, Ajax, Javascript, XML, MS SQL-Server, NodeJs,
            Web Design, Software</p>
        <p style="color: #3e4b51;">
            <b>html2canvas</b> 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.
        </p>
    </div>
    <input id="btn-Preview-Image" type="button" value="Preview" />
    <a id="btn-Convert-Html2Image" href="#">Download</a>
    <input type="button" value="Preview & Convert" id="btnConvert" >
    <br />
    <h3>Preview :</h3>
    <div id="previewImage">
    </div>

As many of you are asking in the comment section to use a single button click, instead of two-button i.e one for preview and one for download. So below I have updated with a single button also.

#3 JavaScript Code to convert HTML to Image [png]

To save HTML as Image in Javascript first, we need to create a button click event by using addEventListener.Then on click event, we use the html2canvas library function.

Our Javascript code looks like as written below:

 document.getElementById("btn_convert1").addEventListener("click", function() {
	html2canvas(document.getElementById("html-content-holder")).then(function (canvas) {
var anchorTag = document.createElement("a"); document.body.appendChild(anchorTag); document.getElementById("previewImg").appendChild(canvas); anchorTag.download = "filename.jpg"; anchorTag.href = canvas.toDataURL(); anchorTag.target = '_blank'; anchorTag.click(); }); });

The above code will convert HTML div to image in JavaScript. Now below code is for using jquery, you can skip further reading if you want without jquery.

View Demo


Updated latest version:  Instead of 2 buttons we use a single button to preview and download the converted image.

As we have a button which previews and convert HTML to image I,e btnConvert. On button click with the below-written code, we able to convert HTML to an image same as shown in the above video.

  $("#btnConvert").on('click', function () {
                html2canvas(document.getElementById("html-content-holder")).then(function (canvas) {                   
                   var anchorTag = document.createElement("a");
                    document.body.appendChild(anchorTag);
                    document.getElementById("previewImg").appendChild(canvas);
                    anchorTag.download = "filename.jpg";
                    anchorTag.href = canvas.toDataURL();
                    anchorTag.target = '_blank';
                    anchorTag.click();
                });
    });

Fix issue :- Image content in HTML markup

If the HTML markup contains image tags and you try to convert HTML to an image, then the image will not get converted in some browsers.  In that case, you need to pass extra parameters to the html2canvas method.

These extra parameters are allowTaint, useCORS, and set as true by default both are false. So the final code looks like as written below: 

$("#btn_convert").on('click', function () {
		html2canvas(document.getElementById("html-content-holder"),
{ allowTaint: true, useCORS: true }).then(function (canvas) { var anchorTag = document.createElement("a"); document.body.appendChild(anchorTag); document.getElementById("previewImg").appendChild(canvas); anchorTag.download = "filename.jpg"; anchorTag.href = canvas.toDataURL(); anchorTag.target = '_blank'; anchorTag.click(); }); });

If the image source is from another domain, then setting useCORS: true, allows us to convert image tag HTML into an image.

View Demo

Also Read:  How to export HTML table into excel in javascript.

For the older version, you can follow the below-written code, where we have two buttons. One for preview and another is anchor tag, which downloads the image,


#4 Button click converts HTML to Canvas:

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

var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable

    $("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
             }
         });
    });

The above-written jQuery code will create a canvas and append it to our div container for preview purposes.

View Demo 

#5 jQuery: Download HTML to IMAGE / Screenshot of Div content

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

$("#btn-Convert-Html2Image").on('click', function () {
    var imgageData = getCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});

Conclusion:  Here's an easy way to render HTML to an image like PNG. As it's easy to create an image from a canvas. But to render standard HTML elements like DIV, UL, LI, Table, P tags to an image we use the HTML2Canvas javascript library. Using HTML2Canvas will take the screenshot of our HTML web pages. I personally found this as the best javascript library to convert HTML to image.

You can also check these articles:

  1. Preview Image before uploads it with jQuery in Asp.net.
  2. How to get the filename, size, type count in jQuery [input file, File Api].
  3. Create a dynamic HTML table using jquery.
  4. How to remove table row tr in jquery on button click.
  5. Jquery: How to disable Button, Div, Anchor tag.

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to do a favor, then Buy me a coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

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

58 Comments

  1. Anjan Kant 02/09/2016 04:57:09
    Very well explained all steps convert HTML to Image in Jquery.
  2. venkat 02/16/2016 09:07:26
    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....
  3. venkat 02/16/2016 09:09:49
    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. venkat 02/22/2016 06:49:16
    To download in internet explorer please refer this link http://jsfiddle.net/bv16o50f/1/
  5. Ravi 03/01/2016 11:14:14
    Simple steps, very well explained most people think it is a hard task to achieve.
  6. Satinder singh 03/01/2016 15:37:28
    Good one Venkat, thanks for sharing the working JS fiddle :)
  7. Madhu 03/06/2016 02:48:29
    It's working fine for text. But when i use images it's not showing. Can anyone give a solution for an tag
  8. nelson 05/27/2016 09:24:42
    Excellent Tutorial. Its working great in chrome , but In Safari 9.1 , I’m not able to download the png…just have base64, Please help me how to solve this issue…
  9. Nelson 05/27/2016 23:39:36
    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….
  10. Bruno Silva 06/01/2016 21:01:39
    seems very functional, congratulations for the work!
  11. Satinder singh 06/14/2016 11:20:09
    Hi Bruno, Thanks for the reading
  12. Rahul 08/03/2016 13:39:00
    I want to convert image by passing a URL (http://google.com) and a specific on that page. how can I pass that in var element = $(#html-content-holder");"
  13. monica 09/15/2016 01:39:49
    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!
  14. Satinder singh 09/16/2016 06:39:30
    Hi Monica, Am glad you like this article. Well, I didn't test on IOS so can't say about it. Do let me know if you tested with IOS
  15. Satinder singh 09/16/2016 07:14:10
    Hi Rahul, Just try by adding a Div with an IFRAME and set the Iframe URL as what you want. I think this will work for you
  16. ronx 09/22/2016 06:50:50
    Hi Satinder, How can I just make image download on click of download button, I don't want user to first press preview and then download, I just want to click download and image download.
  17. Daniel 10/17/2016 17:36:43
    Is it possible to change the image resolution or size of the image in this example? The problem is that when I download the image it's very blurry and the resolution of the image is low, so when I zoom in it gets pixelated. What can I do?
  18. Mar 10/18/2016 09:52:09
    Hi, I tried the code it works well in Chrome and Mozilla but it is not working in IE. Can anyone advise on this? Thanks
  19. mathew 11/04/2016 13:31:53
    HI Is there any limit for the HTML content. sometimes I want to convert more content around 10 pages at a time.
  20. Hasif 11/08/2016 05:38:59
    Not mobile responsive...... How can we do????
  21. Satinder singh 11/10/2016 12:40:53
    Hello hasif, For mobile responsive you need to your html to be responsive then only it can convert same
  22. Satinder singh 11/10/2016 12:45:27
    Hi Mathew, Well i didnt find any limitation problem while converting (Big Invoice) HTML content to Image, its works fine for me. Let me know what issues have you faced?
  23. Satinder singh 11/10/2016 12:48:21
    Sorry Mar, i never tested on IE
  24. Satinder singh 11/10/2016 12:57:37
    Hi daniel, thanks for reading it. Hope this will be helpful http://stackoverflow.com/questions/22803825/html2canvas-generates-blurry-images
  25. Azeem 02/03/2017 12:13:26
    Thanks for the tutorial Satinder! But what if I want to download it directly without having the preview step, is that possible?
  26. Maynard 03/19/2017 18:07:05
    Amazing code and tutorial. Thank you so much. Has anyone tried using it live? Does it work? I thought I had found exactly what I needed and it worked on my local server, but my instructor tried to shoot me down by saying it wouldn't work on a live server for security reasons (?).
  27. Ghazi Anwer 03/21/2017 06:49:43
    Very nicely explained. can you please help me out how to export an HTML page containing highcharts along with some HTML table into pdf. please help as I have struck in it. Regards Ghazi
  28. Ghazi Anwer 03/21/2017 08:32:18
    what if i want you button instead a hyperlink for download.
  29. Ramprit Sahani 03/24/2017 09:49:49
    Hello It's fine for client side. But i want to image should be download to my server. Is there any option to do this.
  30. Satinder singh 04/06/2017 06:13:36
    Hello Ramprit, This article is about converting HTML to IMAGE, for uploading image on server you can refer this article https://codepedia.info/upload-image-using-jquery-ajax-asp-net-c-sharp/
  31. Satinder singh 04/06/2017 06:30:05
    Hi Ghazi, Here I have used download HTML 5 attribute which only work with Anchor tag. But it you want HTML to IMAGE converted file to be save on button click then pls refer this http://stackoverflow.com/questions/11112321/how-to-save-canvas-as-png-image"
  32. Satinder singh 04/06/2017 15:41:15
    Hello Azeem, Yes, you can by adding both button's code into 1 function, and call that on your button click which will convert HTML to an image as also download it.
  33. Satinder singh 04/06/2017 15:54:48
    Hello Ronx, All you need to copy both button code into one function and comment this line $(#previewImage").append(canvas);."
  34. Karthick 05/05/2017 04:55:19
    Excellent Tutorial. Its working great, but I need without preview and directly download to particular div. kindly suggest
  35. sunil 05/09/2017 12:26:36
    html2canvas is not defined its showning error when click on preview
  36. rahul gothi 05/23/2017 10:53:04
    how to change font-family in generated image
  37. Bhuvana 06/15/2017 06:35:50
    Sir, Excellent Tutorial But I have an issue in I need to download an image without previewing. As you said I have copied both button code into one function and comment this line $(#previewImage").append(canvas); Its working. But when clicking the download its not working . In second click only its downloading the corresponding image. Can you help me ASAP???"
  38. Vikram Singh 07/05/2017 12:25:02
    Is this possible to download image directly on clicking download button without preview(with out clickig preview button)
  39. Satinder singh 07/11/2017 06:32:13
    Yes, you can have you tried by adding both codes into one?https://codepedia.info/wp-admin/#comments-form
  40. Suren 07/17/2017 10:25:18
    Excellent Tutorial.Once screenshot is taken can we automatically attach to email.Is it possible
  41. vivek singh 07/31/2017 09:30:01
    i see your code ..excellent . how my create image automatic save in my specific folder with my genret name.
  42. vivek singh 07/31/2017 09:32:18
    and also my prosses complete than page automatic redirect in another php page.
  43. Satinder singh 08/03/2017 07:58:55
    Hi Vivek, With window.location = http://www.yoururl.com"; you can redirect to any given URL"
  44. Daniel 08/31/2017 04:35:19
    Hey, its an excellent example, but im having a problem, i hope you can help me with this. Im using 3 image files (png) into the canvas, but when i try to download it, they arent rendered, i allowed the option allowTaint but im getting a console log what says Taintered canvases may not be exported. I can make the preview but i cant download, what can i do? :(
  45. Rajendra 10/20/2017 12:30:49
    sir, I have an HTML content that is being updated by js in bulk say 1000 iterations. I want to convert all of them to respective image and create a zip of all the images and make the zip to be downloaded. please kindly help. Thank you.
  46. Satinder singh 10/26/2017 07:02:49
    You might be missing html2canvas js library.
  47. Naidu 11/24/2017 16:44:27
    all text will come but background image not process
  48. kp 04/12/2018 07:11:06
    in my html page images are rotated but when we get convert it is showing stateline.
  49. Shankar 04/17/2018 12:57:47
    Thanks for the Excellent Tutorial. Its working great in Chrome and Firefox, but In Internet Explorer 11, Edge and Safari, I’m not able to download the image. Please help me how to solve this issue???
  50. shreejit 05/07/2018 05:31:26
    Thank you for this! :D I searched every where for a solution but only found it here.
  51. Satinder singh 05/09/2018 19:34:28
    Thanks shreejit, AM glad you find it useful,
  52. Nithin Krishnan 10/11/2018 07:07:28
    @Satinder, did you try getting this running for IE11?
  53. Real Silagan 11/09/2018 01:31:58
    thanks a lot! :)
  54. camelia 11/26/2018 13:12:07
    Thanks for tutorial, I have a problem here, it doesn't work in Chrome with Iphone. Could you please help me?
  55. amar 01/09/2019 13:33:05
    its good but for transform 3d css3 elements not working
  56. Rahul G 04/30/2019 19:40:11
    is there online website to convert html table to images
  57. suchira 03/24/2021 03:55:04
    Great stuff. save my day. Thanks author.
  58. Usha Kalamani 05/18/2021 11:08:57
    I want to share the converted image on social media like Facebook, Linkedin and Tweeter. Please help me..