Wie speichert man ein png aus einer Javascript-Variable

Question

Ich habe ein Bild in base64 in einer Javascript-Variable kodiert: data:image/png;base64, _base64 data_

[EDIT] Ich muss diese Datei auf der Festplatte speichern, ohne den Besucher zu bitten, einen Rechtsklick zu machen [/EDIT]

Ist das möglich? Wie?

Vielen Dank im Voraus

Mit freundlichen Grüßen

Answer 1

Ich weiß, dass diese Frage schon 2 Jahre alt ist, aber ich hoffe, dass die Leute dieses Update sehen werden.

Sie können den Benutzer auffordern, ein Bild in einer base64-Zeichenkette zu speichern (und auch den Dateinamen festzulegen), ohne den Benutzer aufzufordern, eine Rechtsklick

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

Ejemplo:

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

Um ein Klick-Ereignis mit Firefox auszulösen, müssen Sie tun, was in diese SO-Antwort . Im Grunde genommen:

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')

Seit dem 20.03.2013 unterstützt der einzige Browser, der die download Attribut ist Chrome. Hier finden Sie die Kompatibilitätstabelle

Answer 2

... ohne den Besucher nach irgendetwas zu fragen ... Ist das möglich?

Nein, das wäre eine Sicherheitslücke gewesen. Wenn es möglich wäre, könnte man unaufgefordert Malware auf die Festplatte des Endbenutzers schreiben. Die beste Möglichkeit ist eine (signierte) Java-Applet . Es kostet zwar etwas $$$, um es signieren zu lassen (damit es keine Sicherheitswarnungen ausgibt), aber es ist in der Lage, Daten auf die Festplatte des Endbenutzers ohne dessen Erlaubnis zu schreiben.

Answer 3

Ich bin überrascht, dass niemand hier die Verwendung von HTML5-Blobs zusammen mit ein paar netten Bibliotheken erwähnt hat.

Sie benötigen zunächst https://github.com/eligrey/FileSaver.js/ y https://github.com/blueimp/JavaScript-Canvas-to-Blob .

Dann können Sie das Bild in eine Leinwand laden

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

die Leinwand in einen Klecks verwandeln

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

und speichern Sie es schließlich

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

FF wird nicht vollständig unterstützt, aber zumindest erhalten Sie eine separate Seite mit dem Bild.

Sehen Sie sich das an: http://jsfiddle.net/khhmm/9/

EDIT : dies ist nicht kompatibel mit Safari / Mac.

Answer 4

Wie bereits in anderen Antworten erwähnt, können Sie dies nicht nur mit Javascript tun. Wenn Sie wollen, können Sie die Daten (mit normalem HTTP POST) an ein PHP-Skript senden, rufen Sie header('Content-type: image/png') und geben die dekodierten Bilddaten auf der Seite mit echo base64_decode($base64data) .

Dies funktioniert genauso, wie wenn der Benutzer auf ein Bild klickt und es öffnet oder ihn auffordert, die Datei auf der Festplatte zu speichern (der normale Browser-Dialog zum Speichern von Dateien).

Answer 5

Das ist nicht möglich.

Wäre dies der Fall, wären die Browser massiv unsicher, da sie in der Lage wären, ohne Zutun des Benutzers beliebige Daten auf die Festplatte zu schreiben.