user capture div as image and save to computer

javascript html screenshot webcam
Jack Notman picture Jack Notman · Nov 6, 2011 · Viewed 39.8k times · Source

I have a Div on my site, I want to place a button/link (or other things of the sort) that when clicked will save the div and all its contents to the users computer, much like the printing code which is used to print divs. I'm a coding novice so all help will be apreciated.

Answer

Mohsen picture Mohsen · Nov 6, 2011

There is a browser support limit doing this. HTML2Canvas can render your HTML content into a canvas element. Then you can use canvas.toDataURL("image/png"); (docs in MDN) method to export the canvas element to an jpeg or png image.

It's not widely supported but it's still possible.

Related questions

Using HTML5/Canvas/JavaScript to take in-browser screenshots

Google's "Report a Bug" or "Feedback Tool" lets you select an area of your browser window to create a screenshot that is submitted with your feedback about a bug. Screenshot by Jason Small, posted in a duplicate question. How are …

Read More
How to save the contents of a div as a image?

Basically, I am doing what the heading states, attempting to save the contents of a div as an image. I plan on making a small online application for the iPad. One function that is a must is having a 'Save' …

Read More
create screenshot of webpage using html2canvas (unable to initialize properly)

I am attempting to use http://html2canvas.hertzen.com/ to take screenshots of my webpage. I am unable to initialize a canvas element using... var canvas = $('body').html2canvas(); If I were able to get a proper canvas I …

Read More