How to Convert html content into image using jquery

Spread the love

In this Blog Post I am gonna tell you a proper method of “How to change html content into Photo” Using JQuery.For this I found a JQuery Library name HTML2CANVAS.This Library Take Screenshot of whole html written in a container or you can convert whole page into a picture.This Library is very useful for producing Dynamic Pictures like PHP GD Library.You can do many more things Using This Library to convert full page or a particular div into a picture

convert div to image php, convert div to image using canvas, convert html div to image javascript, convert html div to image using jquery, export div to image jquery, html to image converter php script, javascript convert html to image, javascript create image from div

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

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

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

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

Leave a Reply

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