web-dev-qa-db-fra.com

Comment sauvegarder le contenu d'une div en image?

Fondamentalement, je fais ce que dit l'en-tête, en essayant de sauvegarder le contenu d'une div en tant qu'image.

Je prévois de faire une petite application en ligne pour l'iPad.

Une fonction indispensable est d'avoir un bouton «Enregistrer» qui peut enregistrer la page Web complète en tant qu'image et enregistrer cette image sur le rouleau d'appareil photo de l'iPad. Je souhaite sauvegarder le contenu complet d'une div, pas seulement la zone visible.

J'ai brièvement cherché en ligne, mais je n'ai pas trouvé beaucoup de documentation. J'ai trouvé beaucoup sur HTML5 Canvas. Voici du code que j'ai mis en place:

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

Bien que j'obtienne cette erreur:

TypeError: c.getContext is not a function

Cette application sera construite uniquement avec HTML, CSS et jQuery (ou d’autres bibliothèques Javascript).

javascriptjqueryhtml5screenshot
34
Fizzix

Il en existe plusieurs de cette même question ( 1 , 2 ). Une façon de le faire est d'utiliser la toile. Voici une solution de travail . Ici vous pouvez voir quelques exemples d'utilisation de cette bibliothèque.

19
Glen Swift

Faites quelque chose comme ça:

Un <div> avec l'ID de #imageDIV, un autre avec l'ID #download et un <div> caché avec l'ID #previewImage.

Incluez la dernière version de jquery et jspdf.debug.js de the jspdf CDN

Ajoutez ensuite ce 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);
});

Le div sera enregistré en tant que PNG en cliquant sur le #download 

0
Imadeous