So speichern Sie ein PNG aus einer Javascript-Variablen
Lesezeit: 5 Minuten
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
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
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
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.
malber
Ich bin überrascht, dass hier niemand die Verwendung von HTML5-Blobs zusammen mit ein paar netten Bibliotheken erwähnt hat.
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);
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.
Ö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).
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
10152000cookie-checkSo speichern Sie ein PNG aus einer Javascript-Variablenyes
Du kannst nicht. Sie können diesen Beitrag lesen.
– Spilarix
11. Oktober 2010 um 12:28 Uhr