2013-09-02 12 views
20

Grundsätzlich mache ich was die Überschrift angibt, versuche den Inhalt eines Div als Bild zu speichern.Wie speichert man den Inhalt eines Div als Bild?

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

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

Ich habe kurz online gesucht, konnte aber nicht viel Dokumentation zu irgendetwas finden. Ich habe viel auf HTML5 Canvas gefunden. Hier einige Code, den ich zusammen:

<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, erhalte ich diese Fehlermeldung:

TypeError: c.getContext is not a function 

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

+0

mögliche Duplikate von [Wie Screenshot eines Div mit JavaScript zu nehmen?] (Http://StackOverflow.com/Questions/6887183/How-to-take-screen-shot-of-a-div-with- Javascript) –

+0

@GlenSwift - Vielen Dank dafür, aber der Beispielcode in diesem Beitrag funktioniert nicht. – Fizzix

+0

'c.getContext' ist keine Funktion, weil' mycanvas' nur ein div-, kein 'canvas'-Element ist. Nur Canvas's haben einen Kontext. – CheeseWarlock

Antwort

13

Es gibt mehrere dieser Frage (1, 2). Eine Möglichkeit, dies zu tun, ist die Verwendung von Canvas. Here's a working solution. Here können Sie einige Arbeitsbeispiele für die Verwendung dieser Bibliothek sehen.

+0

es gibt mir den folgenden Fehler jedes Mal wenn ich es benutze. html2canvas (document.body) .dann (function (leinwand)) { document.body.appendChild (leinwand); }); TypeError: undefined ist keine Funktion – noj

+1

Es gibt keine Informationen, die ausreichen, um die richtige Lösung für Ihr Problem zu finden. Welche Funktion ist nicht definiert? Wann und wo wirft der Fehler? Ich empfehle Ihnen, eine neue Frage dafür zu erstellen –

Verwandte Themen