Anzeige
Tutorialbeschreibung

PHP - Teil 33 - Copyright-Hinweise dynamisch in Grafiken einfügen

PHP - Teil 33 - Copyright-Hinweise dynamisch in Grafiken einfügen

In den bisherigen Beispielen, die im Zusammenhang mit Bildern gezeigt wurden, ging es ausschließlich um die Grafikgenerierung. Außerdem wurde eine Möglichkeit gezeigt, wie sich Texte in Grafiken einfügen lassen. Dieses Video-Training geht nun noch einen Schritt weiter. Denn jetzt werden in bereits vorhandene Grafiken Texte eingefügt. Praktisch kann das beispielsweise sein, wenn man seine Bilder mit Copyright-Hinweisen versehen will. PHP bietet für solche Zwecke die passenden Funktionen. Ein Problem bei dieser automatischen Beschriftung ist es allerdings, die Texte passend zu platzieren. Daher wird in diesem Tutorial auch gezeigt, wie man den idealen Platz auf dem Bild berechnet und dabei auch Randabstände einhält.

... übrigens findest du die komplette Serie hier: PHP-Workshop-DVD - Basics & Tricks - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Es kommt oft vor, dass man in seine Webseite Bilder einbinden will/muss - denkt man beispielsweise an Bildergalerien oder einzelne Fotos. Wie aber schützt man solche Bilder vor unerlaubter Weitergabe? Hierfür gibt es ganz unterschiedliche, mehr oder weniger hilfreiche Methoden. Eine sehr effiziente Variante ist dabei sicherlich, die Bilder mit einem Copyright-Hinweis auszustatten.

Bilder



 
Auf diese Weise sind die Bilder vor unerlaubter Weiterverwendung geschützt. (Natürlich könnte man den unteren Bildrand abschneiden und somit den Copyright-Hinweis entfernen, das ist aber ein anderes Thema. Um sich bzw. seine Bilder davor zu schützen, könnte man den Text auch diagonal über das Bild legen. Auch das wäre eine Möglichkeit).

Wie aber macht man so etwas am besten, wie fügt man also einen Text in das Bild ein? Eine Möglichkeit besteht sicherlich darin, den Copyright-Hinweis manuell via Bildbearbeitungsprogramm einzufügen. Dazu muss man das Bild aber manuell öffnen, bearbeiten und speichern. Eleganter wäre es doch, wenn sich das dynamisch erledigen ließe. Und genau so etwas ist mittels PHP und der GD-Bibliothek möglich.

Im folgenden Beispiel wird eine Grafik zunächst mittels PHP-Skript eingelesen. In diese Grafik wird über die GD-Bibliothek ein Text eingefügt. Anschließend wird die Grafik, in der nun der Text enthalten ist, unter einem neuen Namen abgespeichert. Voraussetzung ist also zunächst einmal eine Grafik, die als Ausgangspunkt dient.

Bilder



 
Im nächsten Schritt wird das eigentliche Skript definiert. Das folgende Beispiel zeigt, wie so etwas aussehen kann.

<?php
$grafik = 'logo.png';
$beschriftete_grafik = 'logo_beschriftet.png';
$text = "copyright by www.psd-tutorials.de";
$font = 4;
$bild = imageCreateFromPng($grafik); 
$textfarbe = imageColorAllocate($bild, 0, 0, 0);
$y = imageSy($bild);
$hoehe = imageFontHeight($font);
$y = $y - $hoehe - 6;
imageString($bild, $font, 6, $y, $text, $textfarbe); 
imagePng($bild, $beschriftete_grafik);
imageDestroy($bild);
?>


Ruft man dieses Skript im Browser auf, ergibt sich bereits das gewünschte Bild.

Bilder



 
Also bitte nicht wundern - das Browserfenster bleibt tatsächlich leer. Dennoch wurde der Grafik ein Schriftzug hinzugefügt. Nachfolgend wird das für diese Ausgabe verantwortliche Skript noch einmal Schritt für Schritt erklärt. Zuvor aber noch einmal der Hinweis, dass die Originalgrafik unverändert erhalten bleibt.

Bilder



 
Zunächst einmal wird die Grafik benötigt, die eingelesen werden soll. Im aktuellen Beispiel handelt es sich dabei um eine PNG-Grafik. Es sind allerdings auch andere Grafikformate möglich. Mehr dazu im weiteren Verlauf dieses Tutorials.

$grafik = 'logo.png';


Der Name der Grafik – ggf. auch mit Pfadangabe – wird innerhalb der Variablen $grafik gespeichert.

Es ist bereits angeklungen, dass die Grafik geladen, dann mit einem Text versehen und abschließend unter einem anderen Namen gespeichert wird. Dieser Name wird innerhalb der Variablen $beschriftete_grafik gespeichert. (Die Originalgrafik bleibt dadurch unverändert erhalten).

$beschriftete_grafik = 'logo_beschriftet.png';


Auch wenn im aktuellen Beispiel lediglich eine Grafik beschriftet wird, so bestünde auch die Möglichkeit, das gleich für mehrere Grafiken zu erledigen. In diesem Fall müssten die Grafiken in einem Array gespeichert und dann jeweils mit einer Schleife durchlaufen werden.

Im nächsten Schritt wird der Text definiert, der in die Grafik eingefügt werden soll. Im aktuellen Beispiel ist das ein herkömmlicher Copyright-Hinweis.

$text = "copyright by www.psd-tutorials.de";


Dieser Text wird innerhalb der Variablen $text gespeichert. Weiter geht es mit der Definition der Schriftgröße, die im aktuellen Beispiel auf 4 gesetzt wird. Wobei der Wert 4 für eine große Schrift steht.

$font = 4;


 
Nun muss die Grafik eingelesen werden, die manipuliert werden soll. Die Grafikressource wird dann in der Variable $bild hinterlegt. Neben imageCreateFromPng() gibt es übrigens noch andere Funktionen, über die sich Grafiken einlesen lassen. Mehr dazu dann aber im weiteren Verlauf dieses Tutorials. Zunächst einmal zurück zum aktuellen Beispiel.

$bild = imageCreateFromPng($grafik);


Weiter geht es mit den Einstellungen für den Text, der auf der Grafik angezeigt werden soll. Dazu werden die Höhe der Grafik und der Schrift ermittelt. Beide Werte werden verwendet, um den Text in der linken unteren Ecke der Grafik zu positionieren. Zunächst aber die Definition der Schriftfarbe, die im aktuellen Beispiel auf Schwarz gesetzt wird.

$textfarbe = imageColorAllocate($bild, 0, 0, 0);


Über imageSy() wird die Höhe der Grafik ermittelt. Wer die Breite der Grafik herausfinden will/muss, kann übrigens die Funktion imageSx() verwenden.

$y = imageSy($bild);


Ebenso einfach lässt sich die Schrifthöhe auslesen. Verwendet wird dafür die Funktion imageFontHeight().

$hoehe = imageFontHeight($font);


Mit den beiden Werten Höhe der Grafik und Höhe der Schrift können die Koordinaten für die Beschriftung auf der y-Koordinate berechnet werden.

$y = $y - $hoehe - 6;


 
Dazu wird die Schrifthöhe von der Bildhöhe subtrahiert. Dadurch allein erreicht man aber noch nicht das gewünschte Ergebnis, da der Text dann am Bildrand "kleben" würde.

Bilder



Um das zu verhindern, wird durch eine Subtraktion von sechs Pixeln ein entsprechender Abstand am unteren Bildrand eingefügt. Nun kann der Text an den unteren Bildschirmrand geschrieben werden. Verwendet wird dafür die Funktion imageString().

imageString($bild, $font, 6, $y, $text, $textfarbe);


 
Der Funktion imageString() werden verschiedene Parameter übergeben.

$bild – Das ist das eingelesene Bild.
$font – Hierbei handelt es sich um die Schriftgröße.
6 – Der Abstand zum linken Rand der Grafik.
$y – Der Abstand der Schrift zum unteren Rand der Grafik.
$text – Das ist der Text, der auf der Grafik angezeigt werden soll.
$textfarbe – Hierüber wird die Textfarbe bestimmt.

Nachdem die Grafik beschriftet wurde, kann sie unter einem neuen Namen gespeichert werden. Der Name lautet in diesem Fall logo_beschriftet.png.

imagePng($bild, $beschriftete_grafik);


Und schlussendlich wird der Speicher wieder freigegeben, der von der Grafik belegt ist.

imageDestroy($bild);


Mehr ist tatsächlich nicht nötig, um den Copyright-Hinweis in die Grafik einzufügen.

Neben der in diesem Beispiel verwendeten Funktion imageCreateFromPng() gibt es auch noch andere Varianten, die je nach Dateityp verwendet werden können.

Imagecreatefromgif() – Wird zum Einlesen von GIF-Grafiken verwendet.
Imagecreatefromjpeg() – Wird zum Einlesen von JPEG-Grafiken verwendet.
imagecreatefrompng() – Wird zum Einlesen von PNG-Grafiken verwendet.
imagecreatefromwbmp() – Wird zum Einlesen von WBMP-Grafiken verwendet.
imagecreatefromxbm() – Wird zum Einlesen von XBM-Grafiken verwendet.
imagecreatefromxpm() – Wird zum Einlesen von XPM-Grafiken verwendet.

Mit diesen Funktionen könnt ihr beinahe alle verfügbaren Bildtypen für die Beschriftung via PHP verwenden.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von franzg
  • 15.05.2017 - 14:02

Sehr interessant und gut erläutert! Vielen Dank!

Portrait von mario_P
  • 07.10.2016 - 13:04

Danke tolles Video !

Portrait von Xonfon
  • 11.12.2013 - 21:21

gutes Tutorial hat mir weiter geholfen
Danke

Portrait von dmtw2107
  • 16.11.2013 - 09:49

verständlich und toll erklärt danke für das tutorial

x
×
×