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 Asp.net 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:
Step to render HTML to Image [PNG/JGP] using jQuery
- Download and import HTML2Canvas jquery files.
- Add HTML markup.
- jQuery Code: Button click convert HTML to Canvas.
- 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 converting 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.
//*
<script src="Scripts/jquer_latest_2.11_.min.js" type="text/javascript"></script>
<script src="Scripts/html2canvas.js" type="text/javascript"></script>
//*
# 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 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 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>
<br />
<h3>Preview :</h3>
<div id="previewImage">
</div>
#Button click converts 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. 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 purpose.
Try It Yourself ⇒# jQuery: Download HTML to IMAGE / Screenshot of Div content
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.
//*
$("#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);
});
//*
Try It Yourself ⇒
Conclusion: Here’s an easy way to render HTML to 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 HTML2Canvas Js library. Using HTML2Canvas will take the screenshot of our HTML web pages.
You can also check these articles:
- An easy way to upload bulk images in Asp.net c#.
- Upload and resize the image in Asp.net using dropzone js.
- Preview Image before uploads it with jQuery in Asp.net.
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!
44 comments on “Convert HTML to Image in Jquery [Div or Table to jpg/ png]”
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? 🙁
i see your code ..excellent . how my create image automatic save in my specific folder with my genret name.
and also my prosses complete than page automatic redirect in another php page.
Hi Vivek,
With window.location = “http://www.yoururl.com”; you can redirect to any given URL
Excellent Tutorial.Once screenshot is taken can we automatically attach to email.Is it possible
Is this possible to download image directly on clicking download button without preview(with out clickig preview button)
Yes, you can have you tried by adding both codes into one?https://codepedia.info/wp-admin/#comments-form
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???
how to change font-family in generated image
html2canvas is not defined its showning error when click on preview
You might be missing html2canvas js library.
Excellent Tutorial. Its working great, but I need without preview and directly download to particular div.
kindly suggest
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.
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/
what if i want you button instead a hyperlink for download.
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
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
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 (?).
Thanks for the tutorial Satinder!
But what if I want to download it directly without having the preview step, is that possible?
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.
Not mobile responsive…… How can we do????
Hello hasif,
For mobile responsive you need to your html to be responsive then only it can convert same
HI
Is there any limit for the HTML content. sometimes I want to convert more content around 10 pages at a time.
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?
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
Sorry Mar, i never tested on IE
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?
Hi daniel, thanks for reading it.
Hope this will be helpful http://stackoverflow.com/questions/22803825/html2canvas-generates-blurry-images
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.
Hello Ronx,
All you need to copy both button code into one function and comment this line
$("#previewImage").append(canvas);
.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!
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
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”);
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
seems very functional, congratulations for the work!
Hi Bruno,
Thanks for the reading
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….
It’s working fine for text. But when i use images it’s not showing. Can anyone give a solution for an tag
Simple steps, very well explained most people think it is a hard task to achieve.
To download in internet explorer please refer this link
http://jsfiddle.net/bv16o50f/1/
Good one Venkat, thanks for sharing the working JS fiddle 🙂
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…..
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….
Very well explained all steps convert HTML to Image in Jquery.