11.2.9 Bilder laden

In diesem Projekt soll eine Schnecke als Bild ins Programm geladen und animiert werden.

Es gibt ein Problem:

Für unser Programmierprojekt würde das bedeuten, dass eine eigene Bild-Datei nur dann von unserem PC in das p5js-Blockly-Programm geladen werden kann, wenn wir einen Button in das Programm einbauen und mit Hilfe des Lade-Dialogs das Bild laden. Das ist mühsam und unpraktisch, vorallem wenn mehr als ein Bild in einem Programm verwendet werden soll.

Lösung: Die Bild-Dateien werden auf den Server geladen, dort gespeichert und dann kann der Browser die Bild-Dateien automatisch laden.

Ja, das wäre möglich! Aber, wenn jeder Dateien auf unseren Server laden darf, dann könnte die ganze Welt ungefragt Dateien hochladen. Bald würden Hacker-Seiten auf dem Server liegen und man wäre indirekt verantwortlich für Hacker-Angriffe in der ganzen Welt.

Aus diesem Grund muss man sich auf Programmier-Seiten ein eigenes Konto anlegen und anmelden, wenn man eigene Dateien hochladen möchte. Zum Beispiel muss man auf der Seite https://editor.p5js.org/ ein Konto anlegen und kann dann dort seine Projekte zusammen mit eigenen Bilddateien in der Cloud speichern und verwenden.

Es gibt jedoch die Möglichkeit ein Bild in ein eigenes Programm zu laden, ohne dass man aufwendig die Möglichkeit schaffen muss, ein Konto auf einem Server anzulegen.

Das folgende Bild ist eine png-Grafikdatei des Linux-Maskottchens Tux.

Eine Bild-Datei besteht wie alle Dateien aus einer Binär-Folge von 1 und 0:

Diese Binärfolge wird jetzt mit Hilfe einer speziellen Code-Tabelle (der Base64-Codierung) mit Hilfe von Zeichen codiert.

In der Base64-Codierung gibt es genau 64 Zeichen von denen jeweils ein Zeichen genau 6 Bit zugeordnet sind.

Das Padding-Zeichen '=' wird verwendet um den Code aufzufüllen, falls die Anzahl an 1en und 0en im Bild nicht ohne Rest durch 6 teilbar ist: Base64-Codierung.

Jede Bitfolge kann mit der Base64-Codierung in eine Zeichenfolge codiert werden. Die Base64-Zeichenfolge kann als Bild in ein Programm eingefügt und als Bild ausgegeben werden. Auf diese Weise kann man im Programm ein Bild darstellen, ohne dass dafür eine externe Bild-Datei geladen werden muss.

Für die Encodierung eines Bilds in die Base64-Codierung gibt es viele Online-Tools.

Achtung! Viele Online-Seiten sind Werbe-, Tracking- und Viren-Verseucht. Daher ist es wichtig vertrauenswürdige von gefährlichen Seiten zu unterscheiden.

Ein Beispiel für eine vertrauenswürdige Seite ist folgende: https://www.base64-image.de/

Analyse:

  • Die Seite ist nicht werbeverseucht.
  • Für diese Seite gibt es eine Datenschutzerklärung.
  • Es ist ein Impressum vorhanden.
  • Die Analyse der Seite in den Entwickler-Tools (Taste F12 - Sources) zeigt, dass außer den verwendeten Schriftarten (fonts.googleapis.com, fonts.gstatic.com) keine Dateien von fremden Servern geladen werden.

Codierung der Schnecken-Grafik

Für die Base-64-Codierung können Sie auch folgenden Base64-Encoder oder den in den p5.js-Blockly-Editor eingebauten Encoder (Button unten rechts) für png-Dateien verwenden.

  • Laden Sie folgende Grafik-Datei auf den Computer, indem Sie mit der rechten Maustaste auf die Grafik klicken und dann 'Bild speichern unter...' anklicken. Der genaue Wortlaut kann sich von Browser zu Browser unterscheiden.

  • Laden Sie die Datei schnecke.png ins folgende Tool, indem Sie auf "Bild-Datei auswählen ..." klicken.
  • Kopieren Sie dann den Base64-Code in den Arbeitsspeicher (Strg-A = alles markieren, Strg-C = in den Arbeitsspeicher kopieren).

  • Öffnen Sie den p5.js-Blockly-Editor, indem Sie auf folgenden Link klicken: Editor öffnen.

  • Stellen Sie folgendes Programm zusammen und klicken Sie dann auf 'Code ausführen'.

    • Den Block 'preload()' findet man in der Kategorie 'p5-Funktionen'.
    • Die Bild-Blöcke findet man in der Kategorie 'Grundformen'.

Im Block 'preload()' werden die Bilder geladen. Das Programm läuft erst weiter, wenn ein Bild erfolgreich geladen wurde. Kann es ein Bild nicht erfolgreich laden, bleibt das Programm stehen. Da der Text 'base64' kein Bild darstellt, bleibt das Programm stehen.

  • Löschen Sie den Text 'base64' im Bild-Block.
  • Fügen Sie den Base64-Code für das Bild 'schnecke.png', den Sie im Base64-Encoder erzeugt haben, anstelle des Textes 'base64' hinter 'Bild im Base64-Format' ein und drücken Sie dann die Enter-Taste.
  • Klicke Sie auf 'Code ausführen'. Sie sollten folgendes sehen:

Falls etwas nicht geklappt hat, können Sie folgende Datei herunterladen und dann im p5js-Blockly-Editor öffnen: schnecke01.p5xml.

Das Bild kann in seiner Größe skaliert werden und auch die Bildposition kann angepasst werden.

  • Bauen Sie das Programm dazu wie folgt um:
    • Die benötigten Blöcke findet man in der Kategorie 'p5-Helfer'.

  • Verändern Sie den Code so, dass sich die Schnecke animiert über die Zeichenfläche bewegt.
  • Ersetzen Sie im Programm die Schnecke mit dem Pinguin Tux.

  • Zeichnen Sie ein eigenes Bild in einem Grafikprogramm Ihrer Wahl.
  • Laden Sie das Bild in den p5js-Blockly-Editor und gestalten Sie damit eine kleine Szene.