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).

Ascidium

possible duplicate of How to take screen shot of a div with JavaScript? – Shogun

@GlenSwift - Thank you for that, but the example code in that post does not work. – Ascidium

There are several of this same question ((#6887683, (#7339990). One way of doing it is using canvas. Here's a working solution. Here you can see some working examples of using th – Shogun

c.getContext isn't a function because mycanvas is just a div, not a canvas element. Only canvases have a context. – Captivate

Answer 1

Do something like this:

A <div> with ID of #imageDIV, another one with ID #download and a hidden <div> with ID #previewImage.

Include the latest version of jquery, and jspdf.debug.js from the jspdf CDN

Then add this script:

var element = $("#imageDIV"); // global variable
var getCanvas; // global variable
$('document').ready(function(){
  html2canvas(element, {
    onrendered: function (canvas) {
      $("#previewImage").append(canvas);
      getCanvas = canvas;
    }
  });
});
$("#download").on('click', function () {
  var imgageData = getCanvas.toDataURL("image/png");
  // Now browser starts downloading it instead of just showing it
  var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
  $("#download").attr("download", "image.png").attr("href", newData);
});

The div will be saved as a PNG on clicking the #download

Fryd

onrendered is never executed and therefor getCanvas is undefined – Uvular

onrendered is apparently obsolete in html2canvas. Use the .then method instead like `html2canvas(element).then(function(canvas){ yourcode(); }); – Beaded

it worked for me when I gave #download to an anchor tag – Rebound

Answer 2

What about applying full screen to the element and then taking a print of the screen? You can do all that with html and js only. This is just an idea. I need something similar and I haven't tested it yet.

Heeheebiejeebies

Please share some code along with your idea. – Lavonia