Level: anspruchsvoll

Bitte beachte, dass Du für diese Übung mit einer PHP Extension arbeitest. Falls all die genannten Funktionen nicht vorhanden sind, ist die Extension eventuell nicht installiert auf deinem Server.

Idealerweise nutzt Du hier die Übung Bild-Upload.
In jedem Fall benötigst Du einen Pfad zu einer existierenden Bilddatei auf deinem (Test-)Server. In dieser Übung wirst Du folgendes machen (bildlich beschrieben): 

  1. Das Bild in den "Zwischenspeicher" laden, damit Du Zugriff auf die Bits und Bytes hast
  2. Die Grösse Berechnen, um ein proportional dazu die Masse des Thumbnails zu berechnen - in diesem Fall ist die Höhe fix, die Breite muss gemäss dem Seitenverhältnis berechnet werden. Eine fixe Höhe erzeugt eine schönere Darstellung, wenn die Thumbnails nebeneinander platz haben sollten.
  3. Thumbnail gemäss berechneten Grössenangaben erstellen
  4. Bilddaten einlesen und verkleinern
  5. Thumbnail unter eigenem Namen in Unterordner speichern.

 

thumbnail-dreisatz

 

So gehst Du vor: 

  1. Als erstes verwendest Du die Funktion imageCreateFromJpeg() - siehe PHP.net für das einlesen des Original-Bildes in eine "Arbeitsdatei"
  2. Erstelle nun eine Variable für die fixe Höhe, z.B. mit dem Wert 100 (für 100 Pixel)
  3. Lese nun die Seitenlängen des Originalbildes ein, um die Breite zu berechnen. Du benötigst imagesX() für die Breite, imagesY() für die Höhe. Berechne nun anhand eines Dreisatzes die Breite: Du kannst dazu eine Variable $seitenverhaeltnis erstellen, die das Resultat von Höhe/Breite des Originalbildes enthält. Für die Berechnete Breite musst Du daran denken, dass die Pixel-Zahl ein Integer sein muss, keine Kommazahl (gerundet!)
  4. Erstelle dann in einer neuen Variable eine Arbeitsdatei für das Thumbnail-Bild (so dass Du die Selbe ausgangslage hast wie beim Originalbild). Dazu verwendest Du die Funktion imageCreateTruecolor()
  5. Ziel ist nun, mit imageCopyResized() alle Pixel zu berechnen, um eine verkleinerte Variante des Originalbildes zu erreichen. Hierzu müssen diverse Quell- und Zielkoordinaten angegeben werden. Am besten erstellst Du für jeden Parameter der Funktion eine Variable, die Dir hilft, zu erkennen, welchen Wert sie enthält. 
  6. Als letztes kannst Du nun die Daten in der Arbeitsdatei des Thumbnails noch an einen Pfad speichern. Erstelle Dazu einen Unterordner in deinem Bilderordner, den Du mit "thumbs" benennst. So kannst Du die Thumbnails theoretisch unter dem gleichen Namen speichern, wie die Originale, was das Handling vereinfacht. Andere Möglichkeiten wären ein Suffix _thumb in den Dateinamen einzubauen. Verwende für das Speichern die Funktion imageJpeg()
  7. Zur Sicherheit sollte auch diese Datei mit chmod() noch auf die richtigen Rechte gesetzt werden. Sie müssen von allen gelesen, aber eigentlich nur vom Besitzer beschrieben werden können.

 

Tipps:

  • verwende ein Blatt Papier und skizziere alles, was Du Dir nicht gut vorstellen kannst. 
  • Führe unbedingt immer nur einen Schritt auf einmal aus, und teste, ob die Variablen / Resultate auch das erwartete enthalten.