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

Question

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' button that can save the full webpage as an image, and save that image to the iPad's camera roll. I wish to save the full contents of a div, not just the visible area.

I have searched briefly online, but couldn't find much documentation on anything. I found a lot on HTML5 Canvas. Here is some code I put together:

<script> function saveimg() {     var c = document.getElementById('mycanvas');     var t = c.getContext('2d');     window.location.href = image;      window.open('', document.getElementById('mycanvas').toDataURL()); } </script>  <div id="mycanvas"> This is just a test<br /> 12344<br /> </div>  <button onclick="saveimg()">Save</button> 

Although, I am getting this error:

TypeError: c.getContext is not a function 

This application will be built only with HTML, CSS and jQuery (or other Javascript libraries).

Answer 1

There are several of this same question (1, 2). One way of doing it is using canvas. Here's a working solution. Here you can see some working examples of using this library.