So speichern Sie ein PNG aus einer Javascript-Variablen

Ich habe ein Bild, das in base64 in einer Javascript-Variablen codiert ist: data:image/png;base64, base64 data

[EDIT]

Ich muss diese Datei auf der Festplatte speichern, ohne den Besucher zu einem Rechtsklick aufzufordern
[/EDIT]

Ist es möglich ? Wie ?

Danke im Voraus

Mit freundlichen Grüßen

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

Sie können den Benutzer auffordern, ein Bild in einer Base64-Zeichenfolge zu speichern (und auch den Dateinamen festzulegen), ohne den Benutzer zu bitten, Folgendes zu tun Rechtsklick

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

Beispiel:

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

Um ein Klickereignis mit Firefox auszulösen, müssen Sie das tun, was in dieser SO-Antwort beschrieben wird. Grundsätzlich:

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 ist der einzige Browser, der die download Attribut ist Chrome. Überprüfen Sie die Kompatibilitätstabelle hier

… ohne den Besucher etwas zu fragen … Ist das möglich?

Nein, das wäre eine Sicherheitslücke gewesen. Wenn es möglich wäre, könnte man Malware ungefragt auf die Festplatte des Endbenutzers schreiben. Ihre beste Wette ist möglicherweise ein (signiert) Java-Applet. Es stimmt, es kostet ein bisschen $$$, um es signieren zu lassen (damit es keine Sicherheitswarnungen ausgibt), aber es ist in der Lage, Daten ohne seine Erlaubnis auf die Festplatte des Endbenutzers zu schreiben.

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

Sie brauchen zuerst https://github.com/eligrey/FileSaver.js/ und 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 zu einem Klecks

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

und am Ende speichern

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.

Sieh dir das an: http://jsfiddle.net/khhmm/9/

BEARBEITEN: Dies ist nicht mit Safari / Mac kompatibel.

Wie bereits in anderen Antworten angegeben, können Sie dies nicht nur mit Javascript tun. Wenn Sie möchten, können Sie die Daten (mit normalem HTTP-POST) an ein PHP-Skript senden, aufrufen header('Content-type: image/png') und die decodierten Bilddaten an die Seite auszugeben unter Verwendung echo base64_decode($base64data).

Dies funktioniert genau so, als ob der Benutzer auf ein Bild geklickt und es geöffnet oder ihn aufgefordert hätte, die Datei auf der Festplatte zu speichern (der normale Browser-Dialog zum Speichern von Dateien).

Es ist nicht möglich.

Wenn dies der Fall wäre, wären Browser massiv unsicher und könnten zufällige Daten ohne Benutzerinteraktion auf Ihre Festplatte schreiben.

Mit Javascript geht das nicht. die einzige wirkliche möglichkeit, die mir einfällt, ist ein java-applet, aber vielleicht (ich weiß nicht, wie lange dieses bild gespeichert werden soll) könntest du einfach ein img-tag mit deinem png und hinzufügen Caching erzwingen (aber wenn der Benutzer seinen Cache löscht, ist das Bild weg).

Ich denke, es ist mit JavaScript möglich, wenn Sie ActiveX verwenden.

Eine andere Möglichkeit besteht darin, den Server dazu zu bringen, diese Datei mit einem anderen Mime-Typ auszuspucken, damit der Browser den Benutzer auffordert, sie zu speichern.