69

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
  • 22,389
  • 37
  • 108
  • 168
  • 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) – Glen Swift 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

2 Answers2

36

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
  • 539
  • 1
  • 6
  • 22
Glen Swift
  • 11,879
  • 14
  • 45
  • 77
  • 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 – Glen Swift Oct 08 '14 at 12:01
  • 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
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

Imadeous
  • 19
  • 4
  • 2
    onrendered is never executed and therefor getCanvas is undefined – Neri Jun 19 '18 at 16:11
  • 2
    onrendered is apparently obsolete in html2canvas. Use the `.then` method instead like `html2canvas(element).then(function(canvas){ yourcode(); }); – SO Stinks Feb 01 '21 at 14:07