How To Download Div Content As Image Using Javascript

This page explains how to use javascript to load images into the browser s cache.

How to download div content as image using javascript. This example implements the above approach. On download button click will convert canvas to png image format you can set any image format. Then set its attributes like src height width alt title etc. One of its biggest caveats is that it s not easy to save the canvas image data to your computer. This object can be used to represent an html image tag on the page.

The info div contains three paragraph elements and the musical note image all of which will be displayed within the container. One of the built in object types in javascript is the image object. The following code demonstrates how to create a javascript image object. 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. Asp net html5 div table.

Instead you can just crop the part of the image that needs to be seen. Create a javascript image object. The container div represents the container that will hold all of our dynamic content. Here we are ready with our canvas now we just need to download it as image format. Create an empty image instance using new image.

Looks like you took a screenshot of your entire screen then squished the image to conform with code project maximum image width standards. Just a bit of friendly advice you may want to crop your screenshot. Finally insert it to the document. Download html to image screenshot of div content. Html5 canvas has a function named todataurl which allows to convert its contents to image.

The html2canvas javascript library allows to capture screenshots and convert html to image using html5 canvas. Here s the code for downloading.