Frage zum Wiki-Artikel „Grafiken_mit_Data-URI“ speichern mit Namen

[Henry]

Hallo,

wie in dem Wiki lässt sich die Grafik nur speichern mit Seitennamen, also zb. index.gif. Ist natürlich nervend, erst recht wenn mehrere solcher Bilder auf einer Seite sind.

Die üblichen Methoden das zu ändern kenne ich natürlich, frage mich aber ob es nicht eine einfache Möglichkeit gibt dem jweiligen Bild einen passenden Namen mitzugeben, also zb. ähnlich bei <a> wo man das download="xy.png" Attribut zur Verfügung hat. Gibts da was, oder bleiben doch nur Scripte um das zu erreichen?

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

wie in dem Wiki lässt sich die Grafik nur speichern mit Seitennamen, also zb. index.gif.

Das verstehe ich nicht. Die Grafik ist eine Zeichenwurst, die du unter jedem beliebigen Namen speichern kannst.

Bis demnächst
Matthias

[JürgenB]

Hallo Henry,

lass mich raten: Du klickst mit der rechten Maustaste auf die Grafik und wählst dann "Grafik speichern unter". Da die Grafik keinen (vernünftigen) Namen hat, wählt der Browser „index.gif“.

Meine Idee dazu: Leg die DataURL in einen Downloadlink, dann kommt je nach Browsereinstellung der Speicherdialog.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

wollte ich auch schon vorschlagen, aber wenn das Bild auch angezeigt werden soll, steckt die Data-URL dann zweimal im Dokument. Meh…

Rolf

[Henry]

Hallo JürgenB,

lass mich raten: Du klickst mit der rechten Maustaste auf die Grafik und wählst dann "Grafik speichern unter". Da die Grafik keinen (vernünftigen) Namen hat, wählt der Browser „index.gif“.

Ja.

Meine Idee dazu: Leg die DataURL in einen Downloadlink, dann kommt je nach Browsereinstellung der Speicherdialog.

Das hatte ich schon probiert, wenns so gemeint ist wie:

 <a href="" onclick="this.href=this.nextElementSibling.src"; download="img.png">
    <img id="myImage" src="" height="150">
 </a>

geht aber auch nicht.

Gruss
Henry

[Rolf B]

Hallo Henry,

das img ist das firstChild, nicht der nextSibling.

Rolf

[kai345]

Hallo Henry,

das img ist das firstChild, nicht der nextSibling.

Nope.
.firstChild ist hier der whitespace, also typ #text

[Henry]

Hallo Rolf,

das img ist das firstChild, nicht der nextSibling.

upss. kann passieren aber hättest normalerweise recht, hier wäre aber beides falsch, richtig wäre firstElementChild.

Gruss
Henry

[Henry]

Hallo Henry,

Hallo Rolf,

das img ist das firstChild, nicht der nextSibling.

upss. kann passieren aber hättest normalerweise recht, hier wäre aber beides falsch, richtig wäre firstElementChild.

Ändert aber nichts an der Sache, so geht der Download auch nicht.

Gruss
Henry

-- Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“

Gruss
Henry

[JürgenB]

Hallo Henry,

ich glaube, die DataURL muss ins href vom Link.

Gruß
Jürgen

[Der Martin]

Hallo Jürgen,

ich glaube, die DataURL muss ins href vom Link.

genau das tut Henrys onclick-Handler im Link doch: Der ändert so sein eigenes href-Attribut.
Aber vielleicht ist das in dem Moment schon zu spät.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Henry,

dann machst Du was falsch oder ich verstehe das Problem nicht.

Bei mir gings.

https://jsfiddle.net/Rolf_b/2fz69h7m/

Aber nur der Smily, mit dem großen SVG ist er bockig.

Rolf

[JürgenB]

Hallo Rolf,

mein Safari hat beide Bilder runtergeladen, aber in den Downloadordner. Wahrscheinlich habe ich das mal so eingestellt.

Gruß
Jürgen

[Henry]

Hallo Rolf,

Korrektur, sag ja "Wald vor Bäumen..." Ja klar wieder Sibling genutzt. Hast recht deine Beispiel funktioniert. Danke.

dann machst Du was falsch oder ich verstehe das Problem nicht.

kann schon sein, dass ich den Wald vor Bäumen nicht sehe. Dein Beispiel funktioniert mit deinen Data-Grafiken. Nehme ich aber die Grafik aus dem Wiki-Beispiel gehts nicht.

Test.

Gruss
Henry

[Rolf B]

Hallo Henry,

dass ich den Wald vor Bäumen nicht sehe.

Davon ist Dir wohl einer ins Auge gekommen⁉️

Vergleich mal die Click-Handler für Tick und Smiley.

Rolf

[Henry]

Hallo Rolf,

Vergleich mal die Click-Handler für Tick und Smiley.

sag ich doch, daher Korrektur.

Gruss
Henry

[Tabellenkalk]

Hallo,

Vergleich mal die Click-Handler für Tick und Smiley.

sag ich doch, daher Korrektur.

Und? Hast du

mal die Click-Handler für Tick und Smiley

verglichen?

Gruß
Kalk

[Henry]

Hallo Tabellenkalk,

Hallo,

Vergleich mal die Click-Handler für Tick und Smiley.

sag ich doch, daher Korrektur.

Und? Hast du

mal die Click-Handler für Tick und Smiley verglichen?

Meinst du was anderes als this.firstElementChild.src?

Gruss
Henry

[Tabellenkalk]

Hallo,

Meinst du was anderes als this.firstElementChild.src?

Nein. Genau damit funktioniert das doch offenbar. Aber inzwischen denke ich, dass du das auch erkannt hast.

Du hast vermutlich nicht nur mich und Rolf verwirrt, da uns a) dein geändertes Posting nicht auffiel und b) du in deinem Tryit-Beispiel keine korrigierte Version zeigst.

Gruß
Kalk

[Henry]

Hallo Tabellenkalk,

ja stimmt, Henne&Ei, hätte doch besser neuen Post machen sollen. 😉

Gruss
Henry

[Rolf B]

Hallo Henry,

ich verstehe Dich nicht. Du postet einen Link auf eine Testseite, wo das eine Bild klappt und das andere nicht. Und schreibst "Warum" dazu.

Ist das ein Quiz für andere? Oder eine Frage, die Du ratlos stellst? Wenn ersteres, ok, dann hab ich Dich mistverstanden. Wenn letzteres - dann gilt mein Hinweis, dass Du mal vergleichen sollst.

Rolf

[Rolf B]

Hallo Henry,

das Format von Data-URLs wird von RFC 2397 beschrieben:

dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data
       mediatype  := [ type "/" subtype ] *( ";" parameter )
       data       := *urlchar
       parameter  := attribute "=" value

Letztlich ist "base64" also nur ein weiterer Parameter, ohne Wertangabe.

Die Parameter sind Medientyp-spezifisch und pro Medientyp definiert. Zum Beispiel charset für text/... Medientypen, oder boundary für multipart-Typen. Ich weiß nicht, ob RFC2046 alle möglichen Parameter auflistet.

Ein filename Parameter, den man aus dem Content-Disposition Header kennt, ist jedenfalls nicht dabei. Das verbietet ihn nicht; Du kannst ihn setzen, aber er wird nicht beachtet.

Damit kann ich Dich leider nur bitten, dich im Casino von Bad Luck zu entspannen.

Ein Script könnte den ignorierten filename-Parameter aus der Data-URL herausholen und ein a Element generieren, das ein filename-Attribut trägt. Aber Du wolltest ja nicht scripten. Man könnte den filename auch in einem data-Attribut des img Elements unterbringen. Aber ein Script muss schon 'ran, da sehe ich keine andere Möglichkeit.

Rolf

[Matthias Apsel]

Hallo Rolf B,

Ein filename Parameter, den man aus dem Content-Disposition Header kennt, ist jedenfalls nicht dabei. Das verbietet ihn nicht; Du kannst ihn setzen, aber er wird nicht beachtet.

Vor allem ist eine solche Grafik ja auch kein file und ohne file auch kein filename.

Bis demnächst
Matthias

[Henry]

Hallo Matthias,

Vor allem ist eine solche Grafik ja auch kein file und ohne file auch kein filename.

ja und nein, rechtsklick datei speichern erkennt der browser das ja als File an, nur eben mit dem Dokumentenname. Hatte gehofft, dem könnte man irgendwie mitteilen nimm den Namen des Bildelements oder sowas. Scheint mir irgendwie nicht zu Ende gedacht das Konzept. Aber gut, geht nicht, das wars was ich wissen wollte, dank an alle hier.

Gruss
Henry