Dynamische Grafiken und Bilder mithilfe von PHP erstellen und manipulieren – ein How-To

Zuletzt aktualisiert am 15. Juni 2023.

Grafiken und Bilder können eine Webseite aufwerten und die Benutzeroberfläche interessanter machen. Wenn du deine Webseite mit dynamischen, benutzerdefinierten Grafiken und Bildern füllen willst, kannst du mit PHP direkt loslegen. Denn PHP arbeitet serverseitig und bietet vielfältige Funktionen (und Bibliotheken) um Grafiken zu erstellen und zu manipulieren.
In diesem Blogbeitrag zeige ich dir, wie du Grafiken und Bilder mithilfe von PHP erstellen und manipulieren kannst und wie du diese in deiner Webseite einbindest.
Mit PHP kannst du z.B. Text in Grafiken und Bilder umwandeln, Vorhandenes mit neuen Bildern und Grafiken kombinieren und Bilder sogar neu skalieren und anderweitig bearbeiten. Los gehts!

Einführung in die dynamische Grafikgenerierung mit PHP

Mögliche Anwendungsfälle:

• Einbindung einer E-Mail-Adresse als Grafik statt Text
• Erstellung eigener CAPTCHAS
• Dynamische Skalierung von Grafiken
• Dynamische Anzeige und Manipulation von Grafiken (z:B. Usernamen in Bildern).
• Erstellung von grafischen Countern/Besucherzählern
• Batch-Erstellung von Online-Werbemitteln

Wie man Bilder mit PHP erstellt

Ein Bild wird in PHP von einem PHP-Script erstellt. Es gibt also eine Datei, z.B. mit dem Namen “meine-dynamische-grafik.php”

Die Generierung der Grafik erfolgt dann grob gesagt in 5 Schritten:

1. Setzen des Headers, damit die Ausgabe der Datei als Image interpretiert wird
2. Erstellen eines “leeren” Bildes mit festen Abmessungen oder öffnen eines bestehenden Bildes
3. Das Bild mit Farbe füllen
4. Elemente im Bild setzen / Text ins Bild setzen
5. Bild ausgeben

Quellcode für das Erstellen einer einfachen Grafik:

<?php
//Inhalt der Datei "meine-dynamische-grafik.php"

//Schritt 1: Image-Header setzen
header("Content-type: image/png");

//Schritt 2a: Leeres Bild mit festen Abmessungen erzeugen 
$dynamisches_bild = imagecreate(400, 300);

//Schritt 2b: 

//Schritt 3: Das Bild mit Farbe füllen
$color1 = imagecolorallocate($dynamisches_bild, 255, 255, 0);
$color2 = imagecolorallocate($dynamisches_bild, 0, 0, 255);

//Schritt 4a: Elemente im Bild setzen
imagefilledrectangle($dynamisches_bild, 200, 100, 230, 220, $color1);

//Schritt 4b: Text im Bild setzen
//Schrift ist nichts anderes als ein Element im Bild.
ImageString($dynamisches_bild, 10, 50, 50, "Test", $color2);

//Schritt 5: Ausgabe des Bildes
imagepng($dynamisches_bild);
?>

So sieht eine mit obigem Code erstellte Grafik aus:

Wie man eine mittels PHP erstellte Grafik auf einer Webseite einbindet

Nichts einfacher als das! Es gibt 2 weit verbreitete Möglichkeiten:

Einbindung einer On-the-Fly erzeugten Grafik

Wenn die Grafik direkt beim Webseitenaufruf dynamisch erzeugt wird, so kann man die dafür verantwortliche PHP-Datei direkt als img-source im HTML-Code einbinden:

<img src="meine-dynamische-grafik.php">

Das funktioniert, weil in der PHP-Datei der passende Image-Header gesetzt ist und die Ausgabe der Datei damit vom Browser direkt als Grafik interpretiert wird. Die Grafik wird immer direkt beim Aufruf erzeugt.

Einbindung von Batch-Erstellten Grafiken

Wenn die Grafik nicht bei jedem Aufruf neu erstellt werden muss, kann man die Grafiken auch regelmäßig z.B. über einen Cronjob erstellen/aktualisieren lassen und dann regulär als image einbinden:

<img src="meine-dynamische-per-cronjob-erzeugte-grafik.png">

Wie man bestehende Bilder mit PHP manipuliert/ändert

Mit PHP können auch bestehende Bilder manipuliert werden. Das ist z.B. hilfreich, wenn man eine Template-Grafik hat, auf die dann dynamisch der passende Text geprintet werden soll.

Um eine bestehende Grafik einzulesen, verwenden wir die folgende Funktion:

imagecreatefromjpeg("template_2.jpg");

In einem Beispiel können wir z.B. eine Grafik laden und auf diese Grafik einen Schriftzug platzieren.

Das ganze würde dann wie folgt aussehen:

<?php

//Inhalt der Datei "meine-dynamische-grafik.php"

//Bestehendes Bild/Template einlesen
$dynamisches_bild = imagecreatefromjpeg("template_2.jpg");

//Die Farbe für den text festlegen
$color1 = imagecolorallocate($dynamisches_bild, 255, 255, 255);

//Schrift ist nichts anderes als ein Element im Bild.
ImageString($dynamisches_bild, 10, 50, 50, "Test", $color1);

//Image-Header setzen
header("Content-type: image/png");

//Ausgabe des Bildes
ImagePNG($dynamisches_bild, "mein_dynamisches_bild.png");
imagedestroy($dynamisches_bild);
?>

Alternativ gibt es die Funktion für die meisten gängigen Bildformate:

imagecreatefromjpeg()
imagecreatefrompng()
imagecreatefromgif()
imagecreatefromwebp()
imagecreatefromavif()

usw.

Wie man die Größe und Farbe dynamischer Grafiken ändert oder: Wie man Bilder mithilfe von PHP skaliert

eGrafiken mittels PHP skalieren zu können ist extrem hilfreich, besonders wenn man eine Website mit vielen Grafiken hat. Mit der PHP-Funktion ‘imagecopyresized()’ kann man eine Grafik skalieren, so dass sie genau in die erforderliche Größe passt.

Hier ist ein Beispiel für den Code:

<?php 

// Laden des originalen Bildes 
$originalImage = imagecreatefromjpeg("original.jpg"); 

// Skalierung zu den gewünschten Abmessungen 
$scaledImage = imagecreatetruecolor(300, 300); 
imagecopyresized($scaledImage, $originalImage, 0, 0, 0, 0, 300, 300, imagesx($originalImage), imagesy($originalImage)); 

// Speichern des skalierten Bildes 
imagejpeg($scaledImage, "scaled.jpg"); 

// Löschen des temporären Bildes 
imagedestroy($scaledImage); 

?> 

Das obige Beispiel zeigt, wie man ein Bild namens ‘original.jpg’ mit einer Breite und Höhe von 300px skaliert und als ‘scaled.jpg’ speichert.

Wie man Bilder mittels PHP zuschneidet (croppt):

PHP kann verwendet werden, um Bilder zu zuschneiden, indem die Bildfunktionen der GD-Bibliothek verwendet werden. Eine einfache Möglichkeit ist die Verwendung von imagecreatetruecolor() und imagecopyresampled(), um ein neues Bild zu erstellen, das eine Kopie des ursprünglichen Bildes ist, aber in den angegebenen Abmessungen zugeschnitten wurde.

Folgendes Codebeispiel zeigt, wie man ein Bild zuschneidet:

<?php 

// Bild laden 
$image = imagecreatefromjpeg("original.jpg"); 

// Neues Bild in gewünschten Abmessungen erstellen 
$new_image = imagecreatetruecolor(200, 200); 

// Ursprüngliches Bild zuschneiden und in neues Bild kopieren 
imagecopyresampled($new_image, $image, 0, 0, 0, 0, 200, 200, imagesx($image), imagesy($image)); 

// Neues Bild speichern 
imagejpeg($new_image, "new.jpg"); 

?> 

imagecreatecopy: Thumbnails eines Bildes mit PHP erstellen

Oftmals wird PHP genutzt, um einen Bildupload zu ermöglichen, und Thumbnails – also kleinere Vorschaugrafiken – von Bildern zu erzeugen.
So kann man z.B. verschiedene Abmessungen und Größen eines Bildes erstellen und dann je nach Endgerät (Desktop/Mobil) das passende Bild auf einer Webseite einbinden. So verhindert man, dass für geringe Auflösungen viel zu große Bilder übertragen werden und damit die Ladezeit einer Webseite unnötigerweise erhöht wird (das ist z.B. auch ein Rankingfaktor bei Google).

Die Funktion, die hier zum Einsatz kommt, nennt sich:

imagecopyresized()

Wie man Bilder mit PHP dreht

Auch hier gibt es eine einfach Funktionalität. Wir rufen einfach die Funktion “imagerotate” mit unserem in eine Variable geladenen (oder neu erstellten) Bild auf und ersetzen den bisherigen Inhalt der Variable damit:

$dynamisches_bild = imagerotate($dynamisches_bild, 90, 0);

Das zweite Parameter gibt an, um wie viel Grad das Bild gedreht werden soll. Im Beispiel 90 Grad.

Wie man mit PHP Text in Bildern einfügt

Wohl eine der häufigsten Anwendungsfälle bei der Bildmanipulation mittels PHP ist es, beliebigen Text in neue oder bestehende Grafiken einzufügen.
Wie man neue Grafiken erzeugt oder bestehende Grafiken manipuliert, wissen wir nun.
Lass uns nun Text auf einem Bild platzieren:

<?php
//Inhalt der Datei "meine-dynamische-grafik.php"

//Schriftart
//Hier bitte den Pfad zum Font-File angeben. Wenn die Font im gleichen Verzeichnis wie das Skript liegt, mit führendem "./" angeben.
$font = "./SourceCodePro-Bold.ttf";
//Pfad zum Speichern des Files - Hier z.B. in ein Unterverzeichnis eines WordPRess-Upload-Verzeichnisses.
$path = "../wp-content/uploads/generated_images/";
//ID des Bildes zum Speichern
$imageid = "testimg";


//Text hinterlegen
$text = "Dynamischer Text";
//Automatische Zeilenumbrüche nach 15 Zeichen erstellen
$text = wordwrap($text, 15, "-\n", true);

//Bestehendes Bild/Template einlesen
$dynamisches_bild = imagecreatefromjpeg("template_2.jpg");

//Farben definieren
$color1 = imagecolorallocate($dynamisches_bild, 255, 255, 255);
$color2 = imagecolorallocate($dynamisches_bild, 0, 0, 255);

//Text im Bild setzen
//Schrift ist nichts anderes als ein Element im Bild.
//Es gibt mehrere Varianten, um Text in einem Bild zu setzen
//Variante 1: Quick and Dirty mittels "ImageString()"
ImageString($dynamisches_bild, 10, 50, 50, "Test", $color2);

//Variante 2: Mit mehr Optionen wie einer spezifischen Schriftart und Schriftgröße mittels "imagettftext()"
imagettftext($dynamisches_bild, 100, 0, 200, 550, $color2, $font, $text);

//Ausgabe des Bildes: Speichern im angegebenen Pfad mit einer Bild-ID als Dateinamen 
ImagePNG($dynamisches_bild, $path . $imageid . ".png");

//Temporäres Bild löschen und Speicher freigeben
imagedestroy($dynamisches_bild);

?>

Schau dir auch das folgende Video an, welches erläutert, wie du Strings mittels PHPO in Bildern einfügst.

imagecreatefromstring – Bilder aus Base64 Daten/Strings erstellen

Es gibt Fälle, in denen werden Bilder als Base64-Strings repräsentiert. Zum Beispiel wenn Bilder in einer Datenbank gespeichert werden (über den Sinn oder Unsinn lässt sich hier natürlich streiten ;)).

Mit Hilfe der Funktion imagecreatefromstring() lässt sich in PHP ein Bild aus einem BAS64-kodierten Imagestream erstellen.

Fazit: Dynamische Grafiken und Bilder mithilfe von PHP erstellen und manipulieren – ein How-To

Mit Hilfe von PHP ist es bequem und ohne große Klimmzüge möglich, Grafiken in verschiedenen Formaten zu erstellen und zu manipulieren.
Es können Formen, Farben sowie Texte in einem Bild erstellt werden, sowie Bilder skaliert, transformiert und ausgegeben werden.

Quellen:

https://www.php.net/manual/en/ref.image.php