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

Question

Ich frage mich, ob es eine JavaScript-Bibliothek gibt, die mir erlauben würde, ein Bild aus dem Inhalt eines DIV zu generieren.

Grundsätzlich ist dies für einige Server-Side Printing-Code 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!

Cheers, Ro

Answer 1

I Ich glaube, ich habe einen Weg gefunden, es zu tun.

1) Wenn der Benutzer Drucken drückt, befragen Sie das DIV
2) Bilder auf denen DIV generiert werden die Openlayers-API
3) Ergreifen Sie die URL jedes Bild
4) Besorgen Sie sich die Position auf dem Bildschirm jedes Bildes
5) Übersetzen Sie die Bildschirmposition in eine Real-World Lage (ich habe API für diese)
6) Als Teil des Drucks senden Sie alle Bild-URLs zusammen mit ihren realen Extents.
7) Erlauben Sie dem Server, die Bilder erneut anzufordern und sie an die entsprechenden Stellen zu zeichnen.

Answer 2

Sie können ein Bild-Tag von JavaScript erstellen, aber nicht das eigentliche Bild in es: JS keine Befehle Speicher für die Bitmap zuzuweisen hat, und es hat keine Befehle etwas darauf zu machen.

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

[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. Fügen Sie die URL in das SRC-Attribut ein und drucken Sie sie.

Answer 3

Ich glaube wirklich nicht, dass dies auf dem 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? .

Answer 4

generieren Bilder nur in IE5 :(war dann aus Sicherheitsgründen wurde fallen gelassen mir fehlt es noch

Answer 5

Vielleicht ist es möglich, mit dem Canvas.

MDN - Drawing Graphics with Canvas

Answer 6

Muss dies 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.

Answer 7

Sehr interessante Frage.

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