wake-up-neo.com

Wie speichere ich den Inhalt eines div als Bild?

Im Grunde mache ich das, was die Überschrift angibt, und versuche, den Inhalt eines div als Bild zu speichern.

Ich plane, eine kleine Online-Anwendung für das iPad zu erstellen.

Eine Funktion, die ein Muss ist, ist die Schaltfläche "Speichern", mit der die gesamte Webseite als Bild gespeichert und auf der Kamerarolle des iPad gespeichert werden kann. Ich möchte den gesamten Inhalt eines div speichern, nicht nur den sichtbaren Bereich.

Ich habe kurz online gesucht, aber zu nichts gefunden. Ich habe viel auf HTML5 Canvas gefunden. Hier ist ein Code, den ich zusammengefügt habe:

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

Obwohl ich diese Fehlermeldung bekomme:

TypeError: c.getContext is not a function

Diese Anwendung wird nur mit HTML, CSS und jQuery (oder anderen Javascript-Bibliotheken) erstellt.

34
Fizzix

Es gibt mehrere dieser Frage ( 1 , 2 ). Eine Möglichkeit, dies zu tun, ist die Verwendung von Leinwand. Hier ist eine funktionierende Lösung . Hier sehen Sie einige Arbeitsbeispiele für die Verwendung dieser Bibliothek.

19
Glen Swift

Tun Sie so etwas:

Ein <div> mit der ID von #imageDIV, ein anderer mit der ID #download und einem versteckten <div> mit der ID #previewImage.

Fügen Sie die neueste Version von jquery und jspdf.debug.js aus der jspdf-CDN ein.

Fügen Sie dann dieses Skript hinzu:

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

Das div wird als PNG gespeichert, wenn Sie auf den #download klicken. 

0
Imadeous