Convert html content into image using jquery

In this tutorial I am going to show you how to convert html content into image using jquery, I found a library called html2canvas It take screen shot of html content into canvas or you can convert any specific div into canvas image. It is helpful for generating dynamic images like php GD library. You can do lot more things with this library, capture full page or specific part of web page and generate image for same.



convert-html-2-image

First of all download html2canvas javascript library and inculde on page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="html2canvas.js"></script>

Below I am going to create a html page with some content and image and i need to generate image of displayed content+image.

<div style="">
<div  style="margin:0 auto;text-align:center; width:50%">
	<div id="wrp" style="border:1px; solid;">
	<img src="rohit.jpeg" />
	<h3>Rohit Kumar</h3>
	<input type="text" value="" placeholder="Enter custom text here!!.." style="background-color: transparent;border: 0px solid;" width="300"/>
	<br/>
 
	</div>
	<br/>
	<button id="gimg" type="button">Generate Image</button>
 
	<div id="img" style="display:none;">
		<img src="" id="newimg" />
	</div>
</div>

In the above code there is two div, in first div i put image and name of mine and also you have choice to enter custom text, Second div will by default hide, So when ever you’ll click on Generate Image button it’ll take screenshot of first div and will display on second div.


Image generation code using html2canvas

$(function(){
  $("#gimg").click(function(){
     html2canvas($("#wrp"), {
	    onrendered: function(canvas) {
	       var imgsrc = canvas.toDataURL("image/png");
	       console.log(imgsrc);
	       $("#newimg").attr('src',imgsrc);
	       $("#img").show();
        }
     });
  });  
  });

On click event html2canvas return a canvas container you need to convert canvas into image using this syntax canvas.toDataURL(“image/png”);

DEMO

DOWNLOAD

If you like this post please don’t forget to subscribe my public notebook for more useful stuff

5 Replies to “Convert html content into image using jquery”

  1. Hi this is very nice and working perfecly,
    can you please implement the image download option for the same code, mainly this feature should work in IE(internet explorer).

  2. hi i am not able to convert the div content to a image(where image is dynamically passed through id’s in java script) could you please help me in solving this issue

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.