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.

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”);

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