Creare un'immagine di un DIV in JavaScript (GIF/PNG)

Question

Mi chiedo se sia disponibile una libreria JavaScript che mi consenta di generare un'immagine dai contenuti di un DIV.

Fondamentalmente ciò è richiesto per alcuni codici di stampa lato server, che devono stampare uno sfondo dal browser.

Quello che vorrei in definitiva sarebbe codificare il contenuto DIV in formato PNG e postare i dati codificati con l'operazione di stampa.

Eventuali idee se questo è possibile?

[EDIT] Quello che ho è un'applicazione di mappatura in cui i dati in background provengono da un server di immagini direttamente in un browser DIV (Think Google Maps). Quel div è lo sfondo per me i dati principali. Quando viene premuto Stampa, il server genera un PDF dai dati di cui è a conoscenza, ma non conosce nulla sui dati di background del browser. Quello che mi piacerebbe davvero è essere in grado di fornire il server con l'immagine di sfondo del browser in qualche modo!

Cheers, Ro

Answer 1

I penso di aver trovato un modo per farlo

1) Quando l'utente preme Stampa, interrogare il DIV
2) Le immagini su quel DIV vengono generate da l'OpenLayers API
3) Afferra l'URL di ogni immagine
4) Afferra la posizione sullo schermo di ogni immagine
5) Traduci la posizione dello schermo in un luogo nel mondo reale (ho API per questo)
6) Come parte della stampa, invia tutti gli URL dell'immagine insieme alle loro estensioni reali
7) Permetti al server di ri-richiedere le Immagini e disegnarle nelle loro posizioni appropriate.

Answer 2

È possibile creare un tag di immagine da JavaScript, ma non l'immagine reale in esso: JS non ha comandi per allocare memoria per la bitmap e non ha i comandi per rendere nulla su di esso.

La soluzione usuale è avere un generatore di report sul server che crea l'immagine su richiesta. Guarda BIRT o JasperReports.

[EDIT] In base al tuo commento, la soluzione è semplice: esamina il DIV, trova l'URL per l'immagine di sfondo e sostituisci il DIV con un elemento IMG. Inserisci l'URL nell'attributo SRC e poi stampa.

Answer 3

Realmente non penso che questo sia possibile sul browser, certamente non senza un qualche tipo di plugin.

È possibile inviare alcune informazioni di coordinate o qualcosa al server Web e in questo modo il server Web richiede la stessa immagine di mappa dal server di immagini? .

Answer 4

la generazione di immagini è stato possibile solo in IE5 :(Poi per motivi di sicurezza è stata abbandonata mi manca ancora è

Answer 5

Forse è possibile con il Canvas:.

MDN - Drawing Graphics with Canvas

Answer 6

Dev'essere fatto dal lato del browser? Ho visto dove è possibile effettuare una chiamata lato server e il tipo MIME sulla risposta del server è il tipo di immagine.Penso che l'esempio che sto pensando fosse per i jpeg codificati in b64 in un db, ma il processo dovrebbe essere lo stesso. La risposta sarebbe i dati attualmente nel tuo DIV. Scusate se sono lontano dalla base.

Answer 7

Domanda molto interessante.

Attualmente risolvo questo problema usando ajax (trasferisce le posizioni delle immagini sul server, il server crea un'immagine da pezzi, la salva e invia l'url al client). Non mi piace molto questa soluzione, ma non ne conosco altri ancora.