Erstelle ein Image eines DIV in JavaScript (GIF / PNG)

9

Ich frage mich, ob es eine JavaScript-Bibliothek gibt, mit der ich ein Bild aus dem Inhalt eines DIV erzeugen kann.

Grundsätzlich ist dies für einige serverseitige Druckcodes erforderlich, die einen Hintergrund aus dem Browser drucken müssen.

Was ich am liebsten tun würde, wäre, die DIV-Inhalte in das PNG-Format zu kodieren und die codierten Daten mit der Druckoperation hochzuladen.

Irgendwelche Ideen, wenn das möglich ist?

[EDIT] Was ich habe, ist eine Mapping-Anwendung, wo Hintergrunddaten von einem Bildserver direkt in einen Browser DIV (Think Google Maps) kommen. Das div ist Hintergrund zu mir Hauptdaten. Wenn Drucken gedrückt wird, erzeugt der Server eine PDF-Datei aus den ihm bekannten Daten, weiß aber nichts über die Hintergrunddaten des Browsers. Was ich wirklich gerne hätte, wäre, dem Server das Hintergrundbild des Browsers irgendwie zur Verfügung stellen zu können!

Prost, Ro

    
Ro. 08.05.2009, 10:31
quelle

7 Antworten

0

Ich denke, ich habe einen Weg gefunden, es zu tun.

1) Wenn der Benutzer Drucken drückt, fragt das DIV
ab 2) Bilder auf diesem DIV werden von der OpenLayers API generiert 3) Besorgen Sie sich die URL jedes Bildes
4) Besorgen Sie sich den Standort jedes Bildes auf dem Bildschirm 5) Übersetzen Sie den Bildschirmstandort in einen Real-World-Standort (ich habe API dafür)
6) Als Teil des Drucks senden Sie alle Bild-URLs zusammen mit ihren realen Erweiterungen 7) Gestatten Sie dem Server, die Bilder erneut anzufordern und sie an die entsprechenden Stellen zu zeichnen.

    
Ro. 08.05.2009, 10:59
quelle
3

Vielleicht ist es möglich mit dem Canvas :

MDN - Zeichnen von Grafiken mit Leinwand

    
Deniz Dogan 08.05.2009 10:52
quelle
1

Sie können ein Bild-Tag aus JavaScript erstellen, aber nicht das eigentliche Bild darin: JS hat keine Befehle, um Speicher für das Bitmap zu reservieren, und es gibt keine Befehle, um etwas darauf zu rendern.

Die übliche Lösung ist, einen Berichtsgenerator auf dem Server zu haben, der das Bild auf Anfrage erstellt. Schauen Sie sich BIRT oder JasperReports .

[EDIT] Basierend auf Ihrem Kommentar ist die Lösung einfach: Untersuchen Sie das DIV, suchen Sie die URL für das Hintergrundbild und ersetzen Sie das DIV durch ein IMG-Element. Setzen Sie die URL in das SRC-Attribut und drucken Sie sie dann.

    
Aaron Digulla 08.05.2009 10:37
quelle
1

Sehr interessante Frage.

Eigentlich löse ich dieses Problem mit Ajax (Bilder auf den Server übertragen, Server erstellt ein Bild aus Stücken, speichere es und sende URL an den Client). Ich mag diese Lösung nicht sehr, aber ich kenne sie noch nicht.

    
Roman 08.05.2009 12:20
quelle
0

Ich glaube wirklich nicht, dass dies im Browser möglich ist, sicherlich nicht ohne irgendeine Art von Plugin.

Könnten Sie einige Koordinateninformationen oder etwas an den Webserver senden und auf diese Weise vom Webserver das gleiche Kartenbild vom Bildserver anfordern?

    
mike nelson 08.05.2009 10:48
quelle
0

Das Generieren von Bildern war nur in IE5 möglich :( Dann wurde es aus Sicherheitsgründen gelöscht. Ich vermisse es immer noch.

    
Thinker 08.05.2009 10:52
quelle
0

Muß es auf der Browser-Seite gemacht werden? Ich habe gesehen, wo Sie einen Server-Seitenaufruf tun können und der MIME-Typ auf der Server-Antwort ist der Image-Typ. Ich denke, das Beispiel, an das ich denke, war für b64-kodierte JPEGs in einer db, aber der Prozess sollte der gleiche sein. Die Antwort wären die Daten, die sich derzeit in Ihrem DIV befinden. Tut mir leid, wenn ich weit weg von der Basis bin.

    
dsrekab 08.05.2009 12:16
quelle

Tags und Links