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

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.

Qualche idea se questo è ansible?

[EDIT] Quello che ho è un’applicazione di mapping 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!

Saluti, Ro

Forse è ansible con la Canvas :

MDN – Grafica di disegno con canvas

È ansible creare un tag immagine da JavaScript ma non l’immagine reale al suo interno: JS non ha comandi per allocare memoria per la bitmap e non ha comandi per eseguire il rendering di qualsiasi cosa su di esso.

La solita soluzione consiste nell’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.

Domanda molto interessante

In realtà risolvo questo problema usando ajax (trasferisco 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.

Non penso proprio che sia ansible sul browser, certamente non senza un qualche tipo di plugin.

Potresti inviare alcune informazioni di coordinate o qualcosa al server Web e in questo modo chiedere al server Web di richiedere la stessa immagine di mappa dal server di immagini?

La generazione di immagini era ansible solo in IE5 🙁 Quindi a causa di motivi di sicurezza è stato eliminato. Mi manca ancora.

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 dall’API OpenLayers
3) Prendi l’URL di ogni immagine
4) Afferra la posizione sullo schermo di ogni immagine
5) Traduci la posizione dello schermo in una posizione Real-World (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.

Deve essere fatto dal lato del browser? Ho visto dove è ansible 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.