Come salvare un png dalla variabile javascript

Ho un’immagine codificata in base64 in una variabile javascript: data:image/png;base64, base64 data

[EDIT] Ho bisogno di salvare quel file su disco senza chiedere al visitatore di fare un clic destro [/ EDIT]

È ansible ? Come ?

Grazie in anticipo

I migliori saluti

So che questa domanda ha 2 anni, ma spero che le persone vedano questo aggiornamento.

Puoi chiedere all’utente di salvare un’immagine in una stringa base64 (e anche impostare il nome file), senza chiedere all’utente di fare un clic destro

 var download = document.createElement('a'); download.href = dataURI; download.download = filename; download.click(); 

Esempio:

 var download = document.createElement('a'); download.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='; download.download = 'reddot.png'; download.click(); 

Per triggersre un evento click con Firefox, è necessario fare ciò che è spiegato in questa risposta SO . Fondamentalmente:

 function fireEvent(obj,evt){ var fireOnThis = obj; if(document.createEvent ) { var evObj = document.createEvent('MouseEvents'); evObj.initEvent( evt, true, false ); fireOnThis.dispatchEvent( evObj ); } else if( document.createEventObject ) { var evObj = document.createEventObject(); fireOnThis.fireEvent( 'on' + evt, evObj ); } } fireEvent(download, 'click') 

A partire dal 20/03/2013, l’unico browser che supporta completamente l’attributo download è Chrome. Controlla la tabella di compatibilità qui

… senza chiedere al visitatore qualcosa … È ansible?

No, sarebbe stato un buco di sicurezza. Se fosse ansible, si sarebbe in grado di scrivere il malware sul disco dell’utente finale in modo inaspettato. La soluzione migliore potrebbe essere un’applet Java (firmata). È vero, costa un po ‘di $$$ per farlo firmare (in modo che non faccia scattare gli avvisi di sicurezza), ma è in grado di scrivere dati sul disco di un utente finale senza il suo permesso.

Sono sorpreso che nessuno abbia menzionato l’uso dei BLOB HTML5 insieme ad un paio di belle librerie.

Per prima cosa è necessario https://github.com/eligrey/FileSaver.js/ e https://github.com/blueimp/JavaScript-Canvas-to-Blob .

Quindi è ansible caricare l’immagine in una canvas

 base_image = new Image(); base_image.src ='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='; 

la canvas in un blob

 var canvas = document.getElementById('YourCanvas'); context = canvas.getContext('2d'); // Draw image within context.drawImage(base_image, 0,0); 

e infine salvarlo

 x_canvas.toBlob(function(blob) { saveAs(blob, "screenshot.png"); }, "image/png"); 

FF non è completamente supportato ma almeno si ottiene una pagina separata con l’immagine.

Dai un’occhiata a questo: http://jsfiddle.net/khhmm/9/

EDIT: questo non è compatibile con Safari / Mac.

Come già affermato in altre risposte, non puoi farlo solo con javascript. Se lo desideri, puoi inviare i dati (usando il normale HTTP POST) a uno script PHP, header('Content-type: image/png') chiamata header('Content-type: image/png') e inviare i dati dell’immagine decodificati alla pagina usando echo base64_decode($base64data) .

Ciò funzionerà esattamente come se l’utente avesse fatto clic su un’immagine e l’avesse aperta o richiesto di salvare il file su disco (la normale finestra di dialogo del file di salvataggio del browser).

Non è ansible.

Se lo fosse, i browser sarebbero massicciamente insicuri, essendo in grado di scrivere dati casuali sul tuo disco fisso senza l’interazione dell’utente.

Non puoi Puoi leggere questo post .

con javascript, non puoi. l’unica vera possibilità che posso pensare sarà un’applet java, ma forse (non so per quanto tempo quell’immagine dovrebbe essere salvata) potresti semplicemente aggiungere un img-tag con te png e forzare il caching (ma se l’utente cancella il suo cache, l’immagine sarà sparita).

È ansible creare questo file come blob sul server e utilizzare la funzione setTimeout per triggersre il download.

Penso che sia ansible con JavaScript se usi ActiveX.

Un’altra possibilità è fare in modo che il server sputi quel file con un diverso tipo di mime, in modo che il browser chieda all’utente di salvarlo.

Penso che tu possa fare qualcosa (forse non solo con javascript … programmazione xul necessaria). Ci sono addons di Firefox che salvano le immagini in una cartella (controlla il sito di Firefox addons)