Monday, December 22, 2014

HTML to Image using 'html2canvas.js' plugin

Introduction:

This plugin(html2canvas) allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and builds the screenshot based on the html elements' information available on the page.

How html2canvas Works?

The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements there, which it then uses to build a representation of the page. In other words, it does not actually take a screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.


Usage:

1. Download the 'html2canvas' plugin from this link.

2. Build the html content which you want to take screenshot of.


3. Add the reference of 'html2canvas' plugin in the page where it is going to be used. Make sure the base jquery files such as jquery.js, jquery.ui.js, etc are already added and referred.



















4. Use the appropriate html to image function for any event, say 'button click'. Here I have posted the image of using it for a button click


5. Write the save method for storing the rendered image file in a particular location


































6. Path to store the

path

This set of snippet can be used more efficiently by creating a custom location based on your requirement. This is mainly useful when any user posts their feedback or suggestion, where the image of the page from which they are posting their feedback can easily be acquired using this plugin.

Click here for the demo link.


No comments:

Post a Comment