Benutzer erfassen Div als Bild und speichern auf dem Computer

8

Ich habe eine Div auf meiner Site, ich möchte eine Schaltfläche / einen Link (oder andere Dinge der Art) platzieren, die, wenn sie geklickt werden, das div und all seinen Inhalt auf dem Computer des Benutzers speichern, ähnlich wie der Druckcode verwendet, um divs zu drucken. Ich bin ein Programmierer Anfänger, so dass alle Hilfe geschätzt wird.

    
Jack Notman 06.11.2011, 07:40
quelle

4 Antworten

11

Es gibt ein Browser-Support-Limit, das dies tut. HTML2Canvas kann Ihren HTML-Inhalt in ein canvas -Element rendern. Dann können Sie die Methode canvas.toDataURL("image/png"); ( Dokumente in MDN ) verwenden, um% co_de zu exportieren % Element zu einem canvas oder jpeg image.

Es wird nicht allgemein unterstützt, aber es ist immer noch möglich.

    
Mohsen 06.11.2011 08:03
quelle
1

Einfacher Weg

%Vor%

Verwenden Sie eine Schaltfläche und rufen Sie Ihren versteckten Feldwert

auf %Vor%     
Anoop B.K 14.08.2015 05:48
quelle
0

Angenommen, Sie möchten eine Text- oder HTML-Datei, keine Bilddatei wie einen Screenshot, kann JavaScript selbst keinen "Speichern" -Dialog in einem Webbrowser auslösen, sondern nur eine Antwort von einer Webanfrage an einen Server so.

Um zu beginnen, benötigen Sie ein Formular mit Ihrer Schaltfläche und einem versteckten Feld:

%Vor%

Und Sie benötigen etwas Javascript, um den DIV-Inhalt vor der Übermittlung in das versteckte Feld zu speichern:

%Vor%

Auf dem Server benötigen Sie etwas Code, um den Text zu akzeptieren und ihn in Form eines Dateianhangs wieder auszusenden:

%Vor%

Vorbehalt # 1: Es gibt wahrscheinlich ein paar kleinere Bugs und viel Raum für Verbesserungen, dies ist nur ein Beweis für das Konzept.

Vorbehalt 2: Der obige serverseitige Code ist möglicherweise unsicher, da jede Webseite den Inhalt des Webbrowsers des Benutzers von Ihrer Domain aus steuern kann. Sie müssen einige Maßnahmen hinzufügen, um dies vor Missbrauch zu schützen.

    
richardtallent 06.11.2011 08:06
quelle
0

Eine einfache Möglichkeit wäre, die JavaScript-API von GrabzIt zu verwenden, um ein div aufzunehmen . Sie müssten nur etwas wie das Folgende tun. Wobei #features die ID des zu erfassenden div ist.

%Vor%

Haftungsausschluss Ich habe diese API erstellt!

    
GrabzIt 15.06.2017 14:33
quelle

Tags und Links