How To Download Div Content As Image Using Javascript

Here mudassar ahmed khan has explained how to convert export html div or table to image using html canvas in asp net using c and vb net.

How to download div content as image using javascript. Here we are ready with our canvas now we just need to download it as image format. This example implements the above approach. Canvas is a powerful drawing technology for the web. The html2canvas javascript library allows to capture screenshots and convert html to image using html5 canvas. Instead you can just crop the part of the image that needs to be seen.

The musical note image is packaged with the complete source code for this project available for download on this site. Html5 canvas has a function named todataurl which allows to convert its contents to image. One of the built in object types in javascript is the image object. This page explains how to use javascript to load images into the browser s cache. Here s the code for downloading.

Download html to image screenshot of div content. Create a javascript image object. This object can be used to represent an html image tag on the page. On download button click will convert canvas to png image format you can set any image format. One of its biggest caveats is that it s not easy to save the canvas image data to your computer.

Create an empty image instance using new image. The following code demonstrates how to create a javascript image object. In this post i ll show two ways that will allow your users to save what they see in their browse. Asp net html5 div table. Then set its attributes like src height width alt title etc.

Finally insert it to the document. The container div represents the container that will hold all of our dynamic content.