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

problematische Seite

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

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

akzeptierte Antworten

  1. problematische Seite

    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

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  2. problematische Seite

    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

    1. problematische Seite

      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

      --
      sumpsi - posui - obstruxi
    2. problematische Seite

      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

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

        Hallo Henry,

        das img ist das firstChild, nicht der nextSibling.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          Hallo Henry,

          das img ist das firstChild, nicht der nextSibling.

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

          --
          Stur lächeln und winken, Männer!
        2. problematische Seite

          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

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

            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

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

              Hallo Henry,

              ich glaube, die DataURL muss ins href vom Link.

              Gruß
              Jürgen

              1. problematische Seite

                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

                --
                Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.
                (mit freundlichem Dank an Tabellenkalk für die Ergänzung 😀)
            2. problematische Seite

              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

              --
              sumpsi - posui - obstruxi
              1. problematische Seite

                Hallo Rolf,

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

                Gruß
                Jürgen

              2. problematische Seite

                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

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

                  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

                  --
                  sumpsi - posui - obstruxi
                  1. problematische Seite

                    Hallo Rolf,

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

                    sag ich doch, daher Korrektur.

                    Gruss
                    Henry

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

                      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

                      1. problematische Seite

                        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

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

                          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

                          1. problematische Seite

                            Hallo Tabellenkalk,

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

                            Gruss
                            Henry

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

                      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

                      --
                      sumpsi - posui - obstruxi
  3. problematische Seite

    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

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      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

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. problematische Seite

        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

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