CODEWITHSUNDEEP
javascriptjqueryhtmlscreenshot
Fizzix
Fizzix

Reputation: 24375

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

Upvotes: 83

Views: 266144

Answers (2)

Imadeous
Imadeous

Reputation: 49

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 imageData = 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

Upvotes: 4

Peristilo peris
Peristilo peris

Reputation: 103

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.

Upvotes: 0

Related Questions