So speichern Sie ein PNG aus einer Javascript-Variablen

Lesezeit: 5 Minuten

Benutzer-Avatar
Hottips

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

  • Du kannst nicht. Sie können diesen Beitrag lesen.

    – Spilarix

    11. Oktober 2010 um 12:28 Uhr


Benutzer-Avatar
davoklavo

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

  • Funktionierte perfekt in Chrome, aber nichts in IE8, das mit Google Chrome Frame ausgeführt wurde.

    – Mike Gledhill

    4. Februar 2013 um 12:32 Uhr

  • Wenn Sie jQuery verwenden, verwenden Sie $(download).click(). Wenn Sie jQuery nicht verwenden, überprüfen Sie diese andere SO-Frage

    – davoklavo

    5. Februar 2013 um 16:13 Uhr


  • Ich denke, das funktioniert nicht mit FF, IE. Es reagiert nicht einmal auf das Ereignis, dies könnte dazu führen, dass sich der Benutzer wundert, was los ist.

    – malber

    19. März 2013 um 15:33 Uhr

  • Wie speichere ich es in einem Verzeichnis?

    – Benjamin G

    9. Dezember 2016 um 8:16 Uhr

  • Fantastische Antwort. sehr einfach zu bedienen.

    – Orion

    11. Mai 2017 um 8:53 Uhr

Benutzer-Avatar
BalusC

… 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.

Benutzer-Avatar
malber

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.

  • Angenommen, JS wird verwendet, um codierte Daten auf die Leinwand zu zeichnen, und das Bild wird in keiner Weise im Browser zwischengespeichert —– Ist es immer noch möglich, die Leinwand zu sichern (vielleicht wäre “duplizieren” ein besserer Begriff) und dann programmgesteuert im Cache meines Browsers (oder woanders) speichern? Haben Sie einen Blog oder eine andere Anlaufstelle? (mögliches Beratungsangebot?)

    – telefunkenvf14

    31. März 2013 um 3:05 Uhr


  • Leider bin ich mir nicht sicher, wie Sie dies erreichen können.

    – malber

    2. April 2013 um 14:46 Uhr

  • Vielen Dank! Das hat mir viel Herzschmerz erspart. Ich war zu Blob und FileSaver.js gekommen, konnte aber nicht herausfinden, wie ich sie zusammenfügen sollte. Tolles Zeug.

    – Vinny

    18. September 2014 um 18:05 Uhr

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.

Benutzer-Avatar
Özi

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

Benutzer-Avatar
Julio Santos

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.

  • Die Verwendung von ActiveX beschränkt Sie jedoch auf einen einzigen Webbrowsertyp (MSIE), und selbst dann wird MSIE in seiner Standardeinstellung den Endbenutzer mit allen Arten von Sicherheitswarnungen erschrecken, bevor er fortfährt. ActiveX, nein danke.

    – BalusC

    11. Oktober 2010 um 12:35 Uhr


1015200cookie-checkSo speichern Sie ein PNG aus einer Javascript-Variablen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy