80

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

Fizzix
  • 23,679
  • 38
  • 110
  • 176
  • 1
    possible duplicate of [How to take screen shot of a div with JavaScript?](http://stackoverflow.com/questions/6887183/how-to-take-screen-shot-of-a-div-with-javascript) – Boris Zagoruiko Sep 02 '13 at 22:08
  • @GlenSwift - Thank you for that, but the example code in that post does not work. – Fizzix Sep 02 '13 at 22:19
  • 1
    `c.getContext` isn't a function because `mycanvas` is just a div, not a `canvas` element. Only `canvas`es have a context. – CheeseWarlock Sep 02 '13 at 22:20

3 Answers3

40

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.

Daniel Muñoz
  • 547
  • 1
  • 7
  • 23
Boris Zagoruiko
  • 12,705
  • 15
  • 47
  • 79
  • it gives me the following error everytime I use it. html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); }); TypeError: undefined is not a function – noj Oct 08 '14 at 00:59
  • 3
    There is no information enough to provide correct solution of your problem. What function is undefined? When and where does the error throw? I recommend you to create new question for this – Boris Zagoruiko Oct 08 '14 at 12:01
  • 2
    well you gave him this information that eld to an error, don't blame him for saying theres errors, cmon man – Uriel Feb 03 '22 at 03:29
  • Html2 anvas does not support shadow dom at all. For, this turn towards https://github.com/tsayen/dom-to-image – Vega4 Feb 24 '23 at 11:08
3

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

Imadeous
  • 39
  • 4
1

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.

Peristilo peris
  • 105
  • 1
  • 7