Diese Übung kann auf den Bild-Upload angewendet werden, wenn du diese Übung schon gemacht hast, arbeite dort drin weiter.
Aufgabe
- Lade die Vorlage wasserzeichen-vorlage.zip herunter, die ein HTML Formular sowie einen Ordner mit dem Wasserzeichen enthält
- Bereite nun oberhalb des HTML ein paar Variablen vor, die während dem Arbeiten gebraucht werden können:
- $watermark_path sollte zum Wasserzeichen in assets zeigen
- $image_folder sollte der Zielordner sein, wo das Bild abgelegt wird, erstelle diesen, falls du noch keinen hast
- $img_quality sollte eine Zahl, z.B. 100 für beste Qualität, enthalten. Diese Variable kannst du später für das generieren des neuen Bildes verwenden
- Programmiere nun direkt in dieser Datei die Validierung, falls du das nicht schon in der Upload-Übung gemacht hast. Wichtig ist, auszuschliessen, dass
- kein Formular abgesendet wurde (nutze isset() dazu)
- beim Bildupload ein Fehler passierte (Error Nummer im Bild-Array)
- ein anderes Format als JPG, PNG oder GIF genutzt wurde
- Bereite nun zwei Variablen vor, welche Bildinformationen enthalten. Nutze dazu getimagesize(). Eine Variable soll die Informationen des hochgeladenen Bildes enthalten, eine andere diejenigen des Wasserzeichens
- Mit einem SWITCH oder IF/ELSE kannst du nun abfragen, ob das hochgeladene Bild ein JPG, GIF oder PNG ist. Je nach Ausgangsformat benötigst du nun für das generieren eines temporären Bildstreams die funktion imagecreatefromjpeg(), imagecreatefromgif() oder imagecreatefrompng(). Das Resultat dieser Funktion soll jeweils in der Variable $tmpBild gespeichert werden, mit der du weiterarbeiten kannst.
- Da das Wasserzeichen ein PNG ist, musst du hier nicht abfragen, sondern erstellst auch eine Variable für das Wasserzeichen mit imagecreatefrompng(), z.B. $tmpWasserzeichen
- Als nächstes müssen die Bilddimensionen aus den Bildinformationen der beiden Variablen aus Schritt 4 genutzt werden, damit das Wasserzeichen im Bild platziert werden kann. Speichere dafür die Bildbreite, Bildhöhe, Wasserzeichen Breite und Wasserzeichen Höhe in einzelne Variablen, die du entsprechend benennst (dem Verständnis zuliebe).
- Das Wasserzeichen soll nun in der Mitte des Bildes platziert werden. Wenn du eine andere Positionierung willst, musst du hier etwas anders vorgehen. Für eine mittige Platzierung errechnest du die PositionX aus der Hälfte der Bildbreite und der Hälfte der Wasserzeichen-Breite, und das gleiche für die PositionY mit den Höhe der beiden. Diese beiden Positions-Variablen benötigst du für den nächsten Schritt.
- Nun wird mit den Koordinaten (Position X und Y) aus Schritt 8 und der Bildqualität (100 = beste) das Bild generiert. Verwende dazu die Funktion imagecopymerge(), welche die vorab erstellten Bildstreams und deren Koordinaten benötigt. Als letzten Parameter kannst du einen Wert für die Transparenz (in Prozent) angeben
- Nun wird das Bild noch im Zielordner gespeichert. Verwende die Variable $tmpBild mit der dem MIME-Type entsprechen Speicherfunktion imagejpeg(), imagegif() oder imagepng(). Arbeite hier auch wieder mit einem SWITCH oder IF/ELSE, um je nach MIME-Type die richtige Speicherfunktion zu nutzen.
Tipps
- Machst du ein eigenes Wasserzeichen, das ein JPG oder GIF ist, muss das Erstellen des Wasserzeichens angepasst werden (Schritt 6)
- Die Funktion imagecopymerge() kann nicht mit jedem PNG Rendering gleich gut umgehen. Dieses Beispiel nutzt ein PNG-8
- Brauchst du diesen Code immer wieder in deinem Projekt? Erstelle dir eine Funktion, die diesen Code ausführt!
