Hoe sla je de inhoud van een div op als afbeelding?

In principe doe ik wat de kop aangeeft, in een poging de inhoud van een div als afbeelding op te slaan.

Ik ben van plan een kleine online applicatie voor de iPad te maken.

Eén functie die een must is, is een knop ‘Opslaan’ die de volledige webpagina als afbeelding kan opslaan en die afbeelding op de camerarol van de iPad kan opslaan. Ik wil de volledige inhoud van een div bewaren, niet alleen het zichtbare gebied.

Ik heb kort online gezocht, maar kon nergens documentatie over vinden. Ik heb veel gevonden op HTML5 Canvas. Hier is wat code die ik heb samengesteld:

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

Hoewel ik deze foutmelding krijg:

TypeError: c.getContext is not a function

Deze applicatie wordt alleen gebouwd met HTML, CSS en jQuery (of andere Javascript-bibliotheken).

Antwoord 1, autoriteit 100%

Er zijn meerdere van dezelfde vragen (1 , 2). Een manier om dit te doen is door canvas te gebruiken. Hier is een werkende oplossing. Hierziet u enkele werkende voorbeelden van het gebruik van deze bibliotheek.

Antwoord 2, autoriteit 3%

Doe zoiets als dit:

Een <div>met ID van #imageDIV, een andere met ID #downloaden een verborgen <div>met ID #previewImage.

Voeg de nieuwste versie van jQuery toe, en jspdf.debug.js van het jspdf CDN

Voeg dan dit script toe:

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);
});

De div wordt opgeslagen als een PNG door op de #download

te klikken