Anzeige
Anzeige
UX & Design
Artikel merken

PHPImageWorkshop: Serverseitige Bildbearbeitung leicht gemacht

Bildbearbeitung mit Librarys wie der GD Library für PHP erfordert oft das Schreiben von sehr vielen Codezeilen, um nur kleine Veränderungen an Grafiken durchzuführen. PHPImageworkshop verkürzt viele Aufgaben bei der serverseitigen Bildbearbeitung und bietet weitere nützliche Funktionen.

Von Ilja Zaglov
5 Min. Lesezeit
Anzeige
Anzeige
PHPImageWorkshop für Wasserzeichen verwenden

 

PHPImageworkshop – Möglichkeiten

Anzeige
Anzeige

PHPImageworkshop ist ein Miniphotoshop für Webworker, die sich die aufwändige Entwicklung von Bildbeararbeitungsfunktionen ersparen wollen. Bilder einlesen, Größen verändern, Bilder drehen, Texte einfügen und vieles mehr ist mit der kompakten Klasse möglich. Ein besonderes Feature ist die Ebenen- und Gruppen-Funktion des Klasse. Wie bei Photoshop, Gimp und Co. können Bilder in Ebenen mit Transparenzen angeordnet und jederzeit bearbeitet werden. Mehrere Ebenen in einem Objekt ergeben eine Gruppe. Änderungen an einer Gruppe werden auf alle Ebenen in der Gruppe angewandt.

PHPImageworkshop – Anwendung

Jeder, der schon mal mit Bildverarbeitung in PHP zu tun hatte, dürfte wissen, dass es alles andere als simpel ist, Bilder in die Form zu bringen, in der man sie braucht. Es beginnt schon beim Einlesen: imagecreatefromgif(), imagecreatefrompng(), imagecreatefromjpeg(). Für jedes Format gibt es eine Funktion. PHPImageworkshop setzt schon hier an und erleichtert das Einlesen der Bilder:

Anzeige
Anzeige

$foto = new ImageWorkshop(array('imageFromPath' => '/images/bild.jpg'));

Anzeige
Anzeige

Mit nur einer Codezeile liest PHPImageworkshop das Bild ein und stellt über $foto wichtige Informationen zum geladenen Bild zur Verfügung.

/* Breite des Bildes */

Anzeige
Anzeige

$foto -> getWidth();

/* Höhe des Bildes */

$foto -> getHeight(); 

Anzeige
Anzeige

/* Kürzeste Seite des Bildes (in px) */

$foto -> getNarrowSideWidth();

/* Längste Seite des Bildes (in px) */

Anzeige
Anzeige

$foto -> getLargestSideWidth();

Mit diesen Werten können wir nun arbeiten, um zum Beispiel die Größe des Bildes zu verändern. Dafür bietet die Klasse die Funktionen resizeInPourcent($width,$height,$preserveRatio) und resizeInPixel($width,$height,$preserveRatio). Beide Funktionen erwarten die gewünschte Maximalbreite oder Maximalhöhe des Bildes und können die Bilder bei Bedarf proportional skalieren. Die nachfolgende Anweisung sorgt z.B. dafür, dass das geladene Bild auf eine Größe mit maximal 800px Breite skaliert wird.

$foto -> resizeInPixel(800,null,true);

Anzeige
Anzeige

Auch das Beschneiden von Bildern ist möglich.

$foto->cropInPixel($newWidth$newHeight$positionX$positionY$position);

Hierfür werden die Werte für die neue Breite ($newWidth) und Höhe ($newHeight), die X- und Y-Koordinaten des Punktes, von dem aus Geschnitten werden soll  ($positionX, $positionY) und die Ausgangsposition der Achse ($position) benötigt.

Anzeige
Anzeige

Die Achse kann an verschiedenen Bereichen des Bildes angesetzt werden:

Bildbereiche

Bildbereiche in PHPImageWorkshop

Folglich erzeugt der folgende Code ein 100x100px großes Bild von der linken unteren Ecke mit einem Offset von 30px in X- und 50px in Y-Richtung aus.

 $foto->cropInPixel(100, 100, 30, 50, "LB");

Anzeige
Anzeige
Freistellen

Mit PHPImageWorkshop Bilder freistellen

Durch die Ebenenfunktionen sind sehr fexible Bildbearbeitungen und Kombinationen möglich. Mit der Methode addLayerOnTop() könnt ihr eine neue Ebene in euer Bild laden.

$foto -> addLayerOnTop($image,$positionX,$positionY,$position);

Die Methode erwartet das jeweillige Bild als ImageWorkshop Objekt, die Koordinaten an denen es eingefügt werden soll und die Ausgangsposition der Achse. Als Rückgabewert erhaltet ihr die Nummer und die ID der aktuell erzeugten Ebene. Mit diesen Informationen könnt ihr weitere Veränderungen an der Ebene durchführen. Der folgende Code greift zum Beispiel auf die zweite Ebene in der Gruppe $foto zu und dreht diese um 90°:

$foto -> layers[2] -> rotate(90);

Außerdem können Ebenen in Gruppen jederzeit Nach oben oder unten verschoben werden:

$foto->moveUp($sublayerId); // eine Ebene Höher

$foto->moveDown($sublayerId); // eine Ebene tiefer

$group->moveTop($sublayerId); // auf die oberste Ebene

$group->moveBottom($sublayerId); // auf die tiefste Ebene

PHPImageworkshop erlaubt neben der einzelnen Veränderung von Ebenen in den jeweiligen Gruppen und Untergruppen auch die Bearbeitung der gesamten Gruppe indem die jeweiligen Methoden auf die gesamte Gruppe statt auf die Ebenen angewandt werden.

Außerdem bietet die Klasse eine komfortable Möglichkeit, Text in Fotos einzufügen. Am besten definiert man dafür eine neue Ebene:

$text_ebene = new ImageWorkshop(

array(

"text" => "Hallo Welt!",

"fontPath" => "font.ttf",

"fontSize" => 50,

"fontColor" => "FFFFFF",

"backgroundColor" => "FF0000",

"textRotation" => 0

)

);

$foto->addLayerOnTop($text_ebene, 0, 0, 'LT');

Der Code erklärt sich fast von selbst: Es entsteht eine neue Bildebene mit einem Text, der mit der Schrift font.ttf in der Größe 50 mit Weiß auf rotem Hintergrund und ohne Rotation steht. Diese Ebene wird dann in der oberen linken Ecke des Bildes platziert. Um einen transparenten Hintergrund zu erhalten, kann für backgroundColor der Wert null übergeben werden.

Zu guter letzt möchte man das Bild natürlich auch ausgeben oder Speichern:

$foto->save($dirPath, $filename, $createFolders, $backgroundColor, $imageQuality);

Die Methode erwartet den Pfad zum Speicherziel ($dirPath), den Dateinamen ($filename), die Erlaubnis bzw. das Verbot Ordner anzulegen ($createFolders), die Hintergrundfarbe ($backgroundColor) und die Bildqualität ($imageQuality).

Versuchen wir aber jetzt die Theorie mit etwas Praxis zu verknüpfen. Die folgenden zwei Beispiele sollen die einfache und kompakte Funktionsweise des Scripts demonstrieren. Die Beispiele sind am Ende des Artikels als Download hinterlegt.

Praxisbeispiel: Watermark

Watermarking ist wohl eine der häufigsten Anwendungen für PHP-Bildverarbeitung. Setzen wir uns also nun zum Ziel eine Logo Grafik in die obere rechte Ecke eines Bildes zu setzen und es anschließend als jpg abzuspeichern.

Schritt 1: Logo und Foto laden

$foto = new ImageWorkshop(array('imageFromPath' => 'images/bild.jpg'));
$logo = new ImageWorkshop(array('imageFromPath' => 'images/logo.png'));

Schritt 2: Logo Größe anpassen

$logo-> resizeInPixel(400,null,true);

Schritt 3: Logo auf Bild platzieren

$foto->addLayerOnTop($logo, 50, 50, 'RT');

Schritt 4: Bildgröße ändern

$foto->resizeInPixel(640, null, true);

Schritt 5: Bild speichern

$foto->save("images", "crop.jpg", true, '#000', 95);

Wasserzeichen

PHPImageWorkshop für Wasserzeichen verwenden

Praxisbeispiel: Thumbnail

Auch die Erzeugung von Thumbnails ist ein häufiger Anwendungsbereich für serverseitige Bildbearbeitung. Klar kann man Thumbnails mit Photoshop erstellen und manuell hochladen. Alles automatisch von PHP erledigen zu lassen ist aber auf Dauer um einiges angenehmer.

Schritt 1: Foto Laden

$foto = new ImageWorkshop(array('imageFromPath' => 'images/bild.jpg'));

Schritt 2: Foto Beschneiden

Mit cropMaximumInPixel() kann das Bild automatisch auf eine quadratische Form getrimmt werden. Dabei generiert die Funktion möglichst wenig Verschnitt. Es kann der Offset auf der X- und Y-Achse und die Ausgangsposition der Achse festgelegt werden.

$foto->cropMaximumInPixel(0, 0, "MM");

Schritt 3: Größe ändern

$foto->resizeInPixel(150, 150);

Schritt 4: Bild speichern

$foto->save("images", "crop.jpg", true, '#000', 95);

Bequemer Helfer für Webworker

PHPImageworkshop erleichtert die Arbeit mit Bildern enorm. Es ist leicht zu bedienen, bietet viele nützliche Funktionen und spart jede Menge Codezeilen. Auf der Projekteseite von PHPImageWorkshop findet ihr mehr Infos und Beispiele sowie den Download der aktuellen Version der Klasse.

Die Beispiele zum PHPImageWorkshop aus diesem Artikel könnt ihr hier herunterladen.

Über den Autor

Ilja ZaglovAls selbstständiger Kommunikations- & Mediendesigner und Software Entwickler unterstützt Ilja Zaglov kleine und mittelständische Unternehmen bei der Erstellung von Online- und Offline Medien. Neben Web-Gestaltung gehören Motion-Graphics und 3D-Inhalte zu seinen Spezialgebieten.

Mehr zu diesem Thema
PHP
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
4 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Andreas Weber

Guter Artikel!

Leider funktioniert die Verlinkung nicht. Die Sub-Domain ‚www‘ wird auf dem Zielserver nicht in das richtige VHost Verzeichnis geroutet. Folgender Link funktioniert:

http://phpimageworkshop.com/

Gruß

Antworten
Franky

Ändert nichts an der Tatsache das die gdlib Bilder in schlechter Qualität erzeugt. Ich greife weiterhin zu imagemagick..

Antworten
Kay

Schöne Beispiele, suche schon etwas länger eine einfache Lösung für Wasserzeichen.
Danke!

Antworten
Axel Glitza

Der Beitrag ist tatsächlich schon etwas älter, aber sehr schön geschrieben. Ich würde diese Klasse gerne einbinden, kriege es aber leider nicht hin. Hat hier jemand Erfahrungen? Ich bin Hobby-Programmierer. Danke!

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige