Linuchs: QRC erstellen und als img senden

Moin,

für Liedtexte habe ich oft auch eine .mp3 Datei zum Anhören und Üben.

Da Papier nicht klingt, braucht der Leser/Hörer ein Hilfsgerät, z.B. ein Smartphone, das die Audio-Datei per QRC aufruft.

Ich möchte nicht hunderte von QRCodes als Datei vorrätig halten, sondern bei Druck des Liedtextes den QRC als img einbinden:

@media screen {
  .qrc {
    display: none;
  }
}
<img class="qrc" src="qrccreate.php?url=http://example.com/hallo.mp3" .. />

Ist damit gewährleistet, dass bei Anzeige des HTML-Dokuments der Aufruf von qrccreate.php unterbleibt und nur beim Drucken erfolgt?

Bisher habe ich QRC abgespeichert:

$qrc_filename = "../qrc/qrc_.png";
include_once( "../include/phpqrcode/phpqrcode.php" );
QRcode::png( "hallo.mp3", $qrc_filename); // creates file

Wie kann ich das Ergebnis als Bild senden?

Fragt Linuchs

  1. Hi there,

    Wie kann ich das Ergebnis als Bild senden?

    Was meinst Du mit "senden"? Als Email verschicken? Naja, eigentlich egal, wie auch immer Du etwas versendest mußt Du eine (Temporär-) Datei erzeugen. Ich kenn' die Funktion jetzt nicht, mit der Du den QR-Code generierst, aber ich bin mir fast sicher, daß es da eine Option "als Bild speichern" oder so ähnlich gibt. Das Resultat verschickst Du einfach, anschliessend kannst Du diese Datei ja wieder löschen...

  2. Hallo Linuchs,

    Ich möchte nicht hunderte von QRCodes als Datei vorrätig halten, sondern bei Druck des Liedtextes den QRC als img einbinden:

    Aber die Bilder musst du ja trotzdem vorrätig halten.

    @media screen {
      .qrc {
        display: none;
      }
    }
    
    <img class="qrc" src="qrccreate.php?url=http://example.com/hallo.mp3" .. />
    

    Ist damit gewährleistet, dass bei Anzeige des HTML-Dokuments der Aufruf von qrccreate.php unterbleibt und nur beim Drucken erfolgt?

    Falls es keine allgemeineren oder spezielleren Regeln mit höherer Spezifität gibt, die dieses CSS überschreiben, ja.

    Bisher habe ich QRC abgespeichert:

    $qrc_filename = "../qrc/qrc_.png";
    include_once( "../include/phpqrcode/phpqrcode.php" );
    QRcode::png( "hallo.mp3", $qrc_filename); // creates file
    

    Wie kann ich das Ergebnis als Bild senden?

    Das heißt, du möchtest sie nicht mehr abspeichern? Dann kannst du sie auch nicht als img einbinden, es sei denn als Data-URI (einhergehend mit einer Vergrößerung der Datei). Alternativ musst du schauen, was deine Bibliothek so ermöglicht.

    Bis demnächst
    Matthias

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

      Alternativ musst du schauen, was deine Bibliothek so ermöglicht.

      http://phpqrcode.sourceforge.net/examples/index.php?example=001

      Bis demnächst
      Matthias

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  3. Ist damit gewährleistet, dass bei Anzeige des HTML-Dokuments der Aufruf von qrccreate.php unterbleibt und nur beim Drucken erfolgt?

    Den Satz mal rumgedreht: Wenn das gewährleistet werden soll, dann darf der Request nur beim Drucken erfolgen.

    Also, nur wenn der Besucher auf den Druckknopf drückt, geht der Request raus, holt das Image bzw. eine Datei wo das Image eingebaut ist und das wird dann zum Drucker geschickt.

    MFG

    1. PS: Du könntest dem Besucher auch auf der Liedtextseite einen Link anbieten, bspw

      <a href="/liedtextseite.html?qrc=1">Diese Seite mit QRCode</a>
      

      dann geht der Request zum QRCodeGenerator auch erst dann raus wenn der Besucher da draufklickt und bekommt so eine neue Seite wo QRCode unter dem Liedtext steht.

      Die kanner dann auch drucken.

      MFG

      1. PS: Du könntest dem Besucher auch auf der Liedtextseite einen Link anbieten, bspw

        <a href="/liedtextseite.html?qrc=1">Diese Seite mit QRCode</a>
        

        dann geht der Request zum QRCodeGenerator auch erst dann raus wenn der Besucher da draufklickt und bekommt so eine neue Seite wo QRCode unter dem Liedtext steht.

        Die kanner dann auch drucken.

        Das Bild per Ajax einblenden geht natürlich auch. Auch in diesem Fall geht der Request erst raus wenn der User klickt um das Bild einzublenden.

        MFG

        1. PS: Du könntest dem Besucher auch auf der Liedtextseite einen Link anbieten, bspw

          <a href="/liedtextseite.html?qrc=1">Diese Seite mit QRCode</a>
          

          dann geht der Request zum QRCodeGenerator auch erst dann raus wenn der Besucher da draufklickt und bekommt so eine neue Seite wo QRCode unter dem Liedtext steht.

          Die kanner dann auch drucken.

          Das Bild per Ajax einblenden geht natürlich auch. Auch in diesem Fall geht der Request erst raus wenn der User klickt um das Bild einzublenden.

          Bild in neuer Seite oder per Ajax nachgeladen per Klick, das kann man so machen, daß praktisch beides funktioniert, je nachdem ob JS verfügbar ist oder nicht (progressive Enhancement).

          Schlecht jedoch fände ich, wenn in einem Druck plötzlich QRCode erscheint der vorher auf der Seite nicht zu sehen war.

          Ein aufmerksamer User.

          1. Hallo pl,

            Schlecht jedoch fände ich, wenn in einem Druck plötzlich QRCode erscheint der vorher auf der Seite nicht zu sehen war.

            Da ist was dran.

            Bis demnächst
            Matthias

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

            Bild in neuer Seite oder per Ajax nachgeladen per Klick, das kann man so machen, daß praktisch beides funktioniert, je nachdem ob JS verfügbar ist oder nicht (progressive Enhancement).

            👍

            Schlecht jedoch fände ich, wenn in einem Druck plötzlich QRCode erscheint der vorher auf der Seite nicht zu sehen war.

            Warum? Progressive enhancement heißt auch, Features (enhancements) nur dort anzubieten, wo sie sinnvoll sind, bspw. irgendwas mit Lage/Beschleunigung nur auf Geräten mit entsprechenden Sensoren.

            Ein QR-Code macht auf dem Bildschirm wenig Sinn; da hat man ja Links als Mittel zum Zweck. Warum also dort anzeigen?

            Beim Ausdruck hingegen freut sich der Internetausdrucker: Hey toll, ich muss den URL nicht abtippen, da ist ja ein QR-Code als enhancement.

            LLAP 🖖

            --
            Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
            1. @Gunnar Bittersmann

              Ein QR-Code macht auf dem Bildschirm wenig Sinn; da hat man ja Links als Mittel zum Zweck. Warum also dort anzeigen?

              Siehe hier

              Der QRC kommt ja erst auf die Seite wenn die gedruckt werden soll. Und da macht das schon ein wenig Sinn den da auch anzuzeigen.

              MFG

              1. Dieser Beitrag wurde gelöscht: Völlig unnötiges Gezänk / Rolf B
            2. Hallo Gunnar,

              Ein QR-Code macht auf dem Bildschirm wenig Sinn;

              Das ist ein Irrtum, hier ist der Usecase:

              Ich habe am Freitag einen Hut von einem Amazon Marketplace-ler geschickt bekommen, den ich für's Karnevalskostüm brauche.
              Bestellt: Größe 60, meinem Dickkopf passt keine Huteinheitsgröße.
              Erhalten laut Lieferschein: Welcher Lieferschein?
              Erhalten laut Etikett: Artikel 31415926535898 - keine Größenangabe.
              Scheißlieferant, das Ding hat maximal 58, das sieht für einen 1920er Jahre Mafioso natürlich absolut unmöglich aus. Also Retoure. Hätte besser die Kommentare gelesen, das ist schon einigen anderen aufgefallen.

              Retoureneinlieferung bei Hermes funktioniert so: Rufe mit dem Smartphone auf amazon.de die Retourenseite auf. Dort ist ein QR Code, den zeigt man im Hermes Shop vor und lässt die das Scannen und das Etikett drucken…

              Rolf

              --
              sumpsi - posui - clusi
              1. @@Rolf B

                Ein QR-Code macht auf dem Bildschirm wenig Sinn;

                Das ist ein Irrtum, hier ist der Usecase:

                Anderer Usecase: Bahnticket. Man zeigt dem Schaffner den QR-Code auf seinem Handy/Tablet/Laptop – ohne Totholz fürs Ticket zu verschwenden.

                Solch ein Usecase scheint mit bei Linuchs aber nicht gegeben.

                LLAP 🖖

                --
                Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
                1. Hallo Gunnar,

                  da hast du recht, ich hätte genauer lesen sollen.

                  Rolf

                  --
                  sumpsi - posui - clusi
              2. @Rolf B

                es ist ja die Idee des OP den QRC erst dann auszugeben wenn der er gebraucht wird.

                MFG

  4. Hallo,

    @media screen {
      .qrc {
        display: none;
      }
    }
    
    <img class="qrc" src="qrccreate.php?url=http://example.com/hallo.mp3" .. />
    

    Ist damit gewährleistet, dass bei Anzeige des HTML-Dokuments der Aufruf von qrccreate.php unterbleibt und nur beim Drucken erfolgt?

    soweit ich weiß, ist das browserabhängig. Du musst davon ausgehen, dass der eine oder andere Browser die Ressource "auf Verdacht" trotzdem schonmal anfordert, auch wenn er das Bild nicht aktuell anzeigt.

    $qrc_filename = "../qrc/qrc_.png";
    include_once( "../include/phpqrcode/phpqrcode.php" );
    QRcode::png( "hallo.mp3", $qrc_filename); // creates file
    

    Wie kann ich das Ergebnis als Bild senden?

    Was meinst du mit senden? - Und außerdem: Das sollte die Doku der verwendeten QR-Code-Bibliothek verraten können.

    Ciao,
     Martin

    --
    Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
    1. Was meinst du mit senden?

      Ich denke das Code-Beispiel zeigt, was ich meine:

      <img class="qrc" src="qrccreate.php?url=http://example.com/hallo.mp3" .. />
      

      Ich rufe ein PHP-Programm auf, das mit einem Bild antwortet.

      Dem PHP-Programm wird als Parameter url mitgeteilt, was der QRcode, also das Bild, zeigen soll.

      1. Hi,

        Was meinst du mit senden?

        Ich denke das Code-Beispiel zeigt, was ich meine:

        <img class="qrc" src="qrccreate.php?url=http://example.com/hallo.mp3" .. />
        

        Ich rufe ein PHP-Programm auf, das mit einem Bild antwortet.

        ach so, so einfach! - Ich war durch klawischniggs Rückfrage verunsichert, der anscheinend "Senden per e-Mail" vermutet hat.

        Dann musst du zwei Dinge tun:

        • Einen HTTP-Header "Content-Type: image/png" senden
        • Deiner QR-Code-Lib mitteilen, dass sie das Bild nicht als Datei ablegen, sondern direkt nach stdout schreiben soll. Wie das geht, kann ich dir nicht sagen; bei der GD-Lib würde man das machen, indem man den Filename-Parameter einfch weglässt. Denkbar, dass das hier auch so gelöst ist. Doku lesen.

        So long,
         Martin

        --
        Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
      2. Hallo Linuchs,

        als Ergänzung zu Martin: Wenn deine QRCode-Lib nicht direkt in den HTTP Response-Stream schreiben kann, musst Du mit den Dateinamen aufpassen. Wenn zwei User gleichzeitig auf der Seite sind, überschreiben sie sich ggf. gegenseitig die PNGs.

        Aber wenn Du diesen QRCode-Generator verwendest, reicht es ja, den 2. Parameter einfach wegzulassen (oder FALSE zu übergeben).

        Rolf

        --
        sumpsi - posui - clusi
        1. Hallo Rolf,

          Wenn zwei User gleichzeitig auf der Seite sind, überschreiben sie sich ggf. gegenseitig die PNGs.

          Das ist der eine Grund, warum ich direkt (also ohne eine Datei zu schreiben) ein Bild übermitteln möchte.

          Der zweite Grund ist, wer sollte die Wegwerf-Dateien wieder löschen?

          Linuchs

          1. Hallo,

            Wenn zwei User gleichzeitig auf der Seite sind, überschreiben sie sich ggf. gegenseitig die PNGs.

            Das ist der eine Grund, warum ich direkt (also ohne eine Datei zu schreiben) ein Bild übermitteln möchte.

            das ist schon Grund genug, würde ich sagen.

            Der zweite Grund ist, wer sollte die Wegwerf-Dateien wieder löschen?

            Ein cron-Job?
            Aber besser ist es, wenn diese unnötigen Dateien gar nicht erst entstehen.

            Ciao,
             Martin

            --
            Es ist wie beim Hybridauto: Je mehr du bremst, desto weiter kannste fahren.
            - Mike Krüger
        2. Danke, deinen Hinweis auf den 2. Parameter hatte ich heute morgen nicht gleich geschnallt.

          So viel Geschreib in diesem Faden um so eine einfache Lösung.

          Linuchs

          1. Hallo,

            Danke, deinen Hinweis auf den 2. Parameter hatte ich heute morgen nicht gleich geschnallt.

            dabei hatte ich das auch schon gemutmaßt.

            So viel Geschreib in diesem Faden um so eine einfache Lösung.

            Wir neigen oft dazu, Dinge komplizierter zu machen als sie eigentlich sind.

            So long,
             Martin

            --
            Es kann vorkommen, dass die Nachkommen mit dem Einkommen ihrer Vorfahren nicht auskommen.
          2. Danke, deinen Hinweis auf den 2. Parameter hatte ich heute morgen nicht gleich geschnallt.

            So viel Geschreib in diesem Faden um so eine einfache Lösung.

            Und so stellt sich jetzt das ursprünglich beschriebene Problem völlig anders dar. Natürlich, der 2. Parameter tut es, so einfach ist das, einen QRCode auszudrucken ohne daß er vorher zu sehen ist und daß ein Request rausgeht.

            Also darauf wäre ich echt nicht gekommen. Auch nicht mit Raten. Das ist einfach so Gaga, da fehlen mir die Worte. MFG

            Immerhin weiß ich jetzt wie man Liblary schreibt.

  5. Hallo Linuchs,

    $qrc_filename = "../qrc/qrc_.png";
    include_once( "../include/phpqrcode/phpqrcode.php" );
    QRcode::png( "hallo.mp3", $qrc_filename); // creates file
    

    Wie kann ich das Ergebnis als Bild senden?

    include_once( "../include/phpqrcode/phpqrcode.php" );
    QRcode::png( "hallo.mp3" ); /* creates code image 
                                  and outputs it directly into browser */
    

    http://phpqrcode.sourceforge.net/

    Bis demnächst
    Matthias

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

      deine Lösung hatte ich gestern nicht mehr gesehen.

      Danke dir, funzt wunderbar.

      Gruß, Linuchs

  6. hier eine Lösung. Klick auf den Link lädt die Grafik und danach wird der Druckdialog aufgerufen.

    <p><a href="%url%" id="launch">QRC laden und Drucken</a></p>
    <p id="qrc"></p>
    
    <script>
    function launch(e){
        e.preventDefault();
        var img = new Image();
        img.src = "/red.gif"; // qrc dummy
        img.onload = function(){ window.print() };
        document.getElementById('qrc').appendChild(img);
    }
    document.getElementById('launch').addEventListener('click', launch);
    </script>
    
    

    MFG

    1. Hallo pl,

      die Idee hat was, und sie bringt mich auf den Gedanken, ob man das nicht auch über das beforeprint-Event oder einen matchMedia-Listener lösen könnte, um den QR-Code just on demand zu laden, ohne mit einem eigenen Button Browserfunktionen nachzubauen.

      Natürlich immer mit einem Fallback, der die Seite auch ohne JavaScript funktional hält. Man müsste das Bild serverseitig ins DOM hängen, und wenn JS aktiv ist, nimmt es das Bild flugs wieder heraus und merkt sich die src-URL, um es beim Drucken wieder einzubauen.

      Rolf

      --
      sumpsi - posui - clusi
      1. Hallo

        Natürlich immer mit einem Fallback, der die Seite auch ohne JavaScript funktional hält. Man müsste das Bild serverseitig ins DOM hängen, und wenn JS aktiv ist, nimmt es das Bild flugs wieder heraus und merkt sich die src-URL, um es beim Drucken wieder einzubauen.

        Wäre es, wenn der QR-Code eh serverseitig ins Dokument eingebaut wird, nicht sehr viel einfacher, das Element mit dem QR-Code am Bildschirm per CSS aus- und im Druckstylesheet einzublenden? Auch wenn die Formatierung von Druckausgaben in allen Browsern – auf unterschiedliche Weise aber eben doch – stiefmütterlich behandelt wird, die Anzeige und Nichtanzeige von Elementen bei Aufbereitung für den Druck funktioniert in allen mir bekannten Browsern.

        Tschö, Auge

        --
        Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
        Hohle Köpfe von Terry Pratchett
        1. Hallo Auge,

          der Kreis ist perfekt :) Mit diesem Konzept hatte Linuchs den Thread eröffnet, und eigentlich wissen wollen, wie er das Bild auf die Leitung bekommt.

          Der Grund für die Überlegungen zur Dynamik war Martins Hinweis, dass Browser ggf. auch für display:none Bilder das Bild laden. Zumindest ist das bei mir so angekommen.

          Rolf

          --
          sumpsi - posui - clusi
          1. Hallo

            der Kreis ist perfekt :) Mit diesem Konzept hatte Linuchs den Thread eröffnet, und eigentlich wissen wollen, wie er das Bild auf die Leitung bekommt.

            ich habe das so verstanden, dass er erzeugte QR-Code-Bilder nicht auf dem Webspace vorrätig halten wollte, womit große Teile der anschließenden Diskussion (inklusive dieses Astes) überhaupt nichts mehr zu tun haben.

            Der Grund für die Überlegungen zur Dynamik war Martins Hinweis, dass Browser ggf. auch für display:none Bilder das Bild laden. Zumindest ist das bei mir so angekommen.

            Bei einem Bit Farbtiefe sollte der Traffic nun wirklich nicht ins Gewicht fallen (falls die benutzte QR-Code-Bibliothek das kann).

            Also Erzeugung und Auslieferung des Codes On-The-Fly bei Aufruf des Webdokuments (Base64-codiert im scr-Attribut (verursacht pro Bild etwa 1/3 mehr Traffic als das Bild selbst) oder per Skript) und dann das HTML-Element des Bildes per CSS kontextabhängig aus- und einblenden.

            Tschö, Auge

            --
            Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
            Hohle Köpfe von Terry Pratchett
            1. @@Auge

              Bei einem Bit Farbtiefe sollte der Traffic nun wirklich nicht ins Gewicht fallen (falls die benutzte QR-Code-Bibliothek das kann).

              QR-Code im SVG-Format (falls die benutzte QR-Code-Bibliothek das kann) kann gleich ins Markup eingebunden werden und braucht dann nichtmal einen Extra-HTTP-Request.

              LLAP 🖖

              --
              Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
              1. Hallo Gunnar,

                ok, das ist ein Aspekt. Was ist mit der Serverlast, um das SVG oder PNG zu erzeugen? Wie aufwändig ist die QRCode-Generierung?

                Rolf

                --
                sumpsi - posui - clusi
      2. 1000 Ideen!

        .

  7. Moin,

    für Liedtexte habe ich oft auch eine .mp3 Datei zum Anhören und Üben.

    Da Papier nicht klingt, braucht der Leser/Hörer ein Hilfsgerät, z.B. ein Smartphone, das die Audio-Datei per QRC aufruft.

    Ich möchte nicht hunderte von QRCodes als Datei vorrätig halten, sondern bei Druck des Liedtextes den QRC als img einbinden:

    @media screen {
      .qrc {
        display: none;
      }
    }
    
    <img class="qrc" src="qrccreate.php?url=http://example.com/hallo.mp3" .. />
    

    Ist damit gewährleistet, dass bei Anzeige des HTML-Dokuments der Aufruf von qrccreate.php unterbleibt und nur beim Drucken erfolgt?

    Stimmt, diese Frage ist ja noch offen. Die Antwort darauf findest Du in der Entwicklerkonsole. Da sollte zu sehen sein ob der Request an qrccreate.php rausgeht.

    MFG