Anzeige
Tutorialbeschreibung

Dynamisches Signaturbild mit Transparenz

Dynamisches Signaturbild mit Transparenz

Ziel dieses Workshop: ein transparentes Signaturbild dynamisch erstellen und mit Text belegen. Nur mit PHP v4.3.9 und höher und installierter GDLib möglich.


Vorschaubild


Vorbemerkungen: Dieses Tutorial ist nur mit PHP v4.3.9 und höher und installierter GDLib möglich. Ob euer Hoster das unterstützt, erfahrt ihr individuell über deren FAQs oder Hilfe-Seiten. Mittlerweile hat sich aber PHP5 etabliert, also ist die Chance recht hoch.

Ziel dieses kleinen Workshop ist es, ein Bild für eine Signatur oder ähnliches dynamisch zu erstellen und mit Text zu belegen. Es ist dann ausserdem transparent und passt sich in der Größe dem enthaltenen Text an. Let’s rock.


Schritt 1:
Nach dem üblichen <?php wird dem Browser erstmal in der Header-Information gesagt: „Hey, ich bin ein Bild im Format X“, damit er es richtig darstellt.

<?php
//DynSig.php -- dynamisch Signatur mit Text erzeugen

    
Header("Content-type: image/gif");

 

 

Schritt 2:
Das Funktionsprinzip ist simpel: Wir öffnen ein Ausgangsbild (irgendein Schild mit weißer Fläche oder ähnliches), kopieren es in ein größeres Bild (damit wir Platz für den Text erhalten) und schreiben unseren Text hinein.

Zuerst legen wir das Ausgangsbild fest, lesen seine Ausmaße mit GetImageSize() aus. Danach lesen wir die Datei mit der GDLib ein und haben einen Datenstream mit den Informationen des Originalbildes:

    $ausgangsbild = "ursprung.gif"; // Pfad zum Bild
    $groesse_ausgangsbild = GetImageSize($ausgangsbild);
    
$breite_ausgangsbild=$groesse_ausgangsbild[0];
    
$hoehe_ausgangsbild=$groesse_ausgangsbild[1];
    
    $ausgangsbild = ImageCreateFromGIF($ausgangsbild);
    if(!
$ausgangsbild) // Fehler, falls Bild nicht geöffnet werden konnte
    
{
      die(
"Ausgangsbild konnte nicht geöffnet werden");
    }

 


Schritt 3:
Jetzt lege ich ein paar Optionen fest, mit denen später die Größe und Positionierung des eigenen Textes festgelegt werden kann:

    $schriftgroesse=8;
    
$x=70; //Startwert für XPosition des Textes
    
$y=55; //Startwert für YPosition des Textes



Schritt 4:
Jetzt etwas lustiges: Der im Bild geschriebene Text soll zufällig aus einer Liste ausgewählt werden. Wer will, kann natürlich auch Servervariablen wie IP-Adresse des Betrachters als Text nehmen. Dazu bitte php.net studieren.

   $text = array("PSD-Tutorials.de Fan",
                  
"Meine Hand ",
                  
"samy is my hero");
  
   $ausgabetext=$text[rand(0,sizeof($text)-1)];

Die letzte Zeile aufgeschlüsselt bedeutet nichts anderes als:
$ausgabetext = ----- die Wertzuweisung

$text[   ] ----- hier wird auf das gerade angelegt Array von Strings zugegriffen, die Indexzahl wird gleich zufällig ermittelt

rand(0, sizeof($text) - 1)   ----- Wähle eine zufällige Zahl zwischen 0 und der Anzahl in $text befindlichen Zeilen (-1 wegen der Indexierung, einfach hinnehmen)


Dadurch reagiert das Script dynamisch auf mehr Einträge in der Liste. Ganz coole Typen könnten diese Liste in eine Datei auslagern und hier im Script nur includen.



Schritt 5:
So, jetzt wollen wir noch dynamisch auf die Länge des gerade ausgewählten Ausgabetextes reagieren. Dazu lesen wir die Buchstabenanzahl aus, multiplizieren sie mit der Schriftgröße und addieren die durch die Positionierung entstandene Verschiebung:

    $stringlaenge=strlen($ausgabetext);
    
$stringbreite=$stringlaenge*$schriftgroesse+$x;

    if(
$stringbreite < $breite_ausgangsbild)  //Wenn der Text zu schmal ist, ein Bildbreitenminimum festlegen
    
{
      
$stringbreite = $breite_ausgangsbild;
    }




Schritt 6:
Nun erstellen wir die Grundlage für das finale Bild. Zuerst wird ein neues Bild erschaffen mit den Maßen des Ausgangsbildes und der Breite des Strings. Direkt danach wird die Hintergrundfarbe festgelegt, die aber im Idealfall später sowieso transparent ist. Die im Beispiel festgelegte Farbe kommt nicht in meinem Ausgangsbild vor, deshalb nehme ich sie.

    $zielbild = ImageCreate($stringbreite, $hoehe_ausgangsbild) or die("Kein Bild erzeugt!"); // Zielbild erstellen
    
ImageColorAllocate($zielbild, 236,233,216); //Hintergrundfarbe festlegen




Schritt 7:
Mittlerweile haben wir ein Ursprungs und ein Zielbild, wir wissen welchen Text wir wo und in welcher Größe ausgeben wollen. Jetzt muss alles zusammengeschmiedet werden. Zuerst der Text:
    $schriftfarbe = ImageColorAllocate($zielbild, 19, 51,130);

   
imagettftext($zielbild,$schriftgroesse*72/96,0,$x,$y,-1*$schriftfarbe,"schriftart.ttf",$ausgabetext);

Zur Erklärung:
$zielbild ----- selbstverständlich das Bild, auf das wir schreiben wollen

$schriftgroesse*72/96 ----- Die Schriftgröße muss neu errechnet werden, da die GDLib mit 96DPI rechnet, wir aber die Schriftgröße in 72DPI angeben. Diesen und den nächsten Trick habe ich bei <a href="http://www.tolleiv.de/php/pixelfonts-und-tools.html" title="externer Link zu tolleiv.de">tolleiv.de</a> gelesen.

-1*$schriftfarbe ----- Da ich immer eine kleine Schriftgröße und Pixelfonts wähle, schalte ich mit negativen Farbwerten das Anti-Aliasing aus. Wer glatte Kanten will, lässt die Multiplikation mit -1 weg.

"schriftart.ttf" ----- Der Pfad zur verwendeten Schriftart. Diese muss also auch irgendwie hochgeladen sein. Beachtet dabei mögliche Urheberrechte des Font-Erstellers.

$ausgabetext ----- sollte klar sein




Schritt 8:
Jetzt sind wir mit dem Großteil der Arbeit fertig. Jetzt fügen wir beide Bilder zusammen und setzen eine bestimmte Farbe transparent:
   
    ImageCopyMerge($zielbild,$ausgangsbild,0,0,0,0,$breite_ausgangsbild,$hoehe_ausgangsbild,100);

    
$transparent=ImageColorAllocate ($zielbild, 236,233,216);
   
ImageColorTransparent($zielbild,$transparent);




Schritt 9:
Schlussendlich wird das Bild ausgegeben und der Datenstrom zerstört.

    ImageGIF ($zielbild) or die("Endbild nicht erzeugt!"); // Bild ausgeben
    
Imagedestroy ($zielbild); // make me scream "yeah"
?>




Gesamter Code:
Hier nochmal der zusammenhängende Code für Faule:

<?php
//DynSig.php -- dynamisch Signatur mit Text erzeugen

    
Header("Content-type: image/gif");

    $ausgangsbild = "ursprung.gif"; // Pfad zum Bild
    $groesse_ausgangsbild = GetImageSize($ausgangsbild);
    
$breite_ausgangsbild=$groesse_ausgangsbild[0];
    
$hoehe_ausgangsbild=$groesse_ausgangsbild[1];
    
    $ausgangsbild = ImageCreateFromGIF($ausgangsbild);
    if(!
$ausgangsbild) // Fehler, falls Bild nicht geöffnet werden konnte
    
{
      die(
"Ausgangsbild konnte nicht geöffnet werden");
    }

    $schriftgroesse=8;
    
$x=70; //Startwert für XPosition des Textes
    
$y=55; //Startwert für YPosition des Textes

    $text = array("PSD-Tutorials.de Fan",
                  
"Meine Hand mag die andere",
                  
"samy is my hero");
  
    $ausgabetext=$text[rand(0,sizeof($text)-1)];

    $stringlaenge=strlen($ausgabetext);
    
$stringbreite=$stringlaenge*$schriftgroesse+$x;

    if(
$stringbreite < $breite_ausgangsbild)  //Wenn der Text zu schmal ist, ein Bildbreitenminimum festlegen
    
{
      
$stringbreite = $breite_ausgangsbild;
    }


    $zielbild = ImageCreate($stringbreite, $hoehe_ausgangsbild) or die("Kein Bild erzeugt!"); // Zielbild erstellen
    
ImageColorAllocate($zielbild, 236,233,216); //Hintergrundfarbe festlegen


    $schriftfarbe = ImageColorAllocate($zielbild, 19, 51,130);
   
imagettftext($zielbild,$schriftgroesse*72/96,0,$x,$y,-1*$schriftfarbe,"schriftart.ttf",$ausgabetext);
  
    ImageCopyMerge($zielbild,$ausgangsbild,0,0,0,0,$breite_ausgangsbild,$hoehe_ausgangsbild,100);

    
$transparent=ImageColorAllocate ($zielbild, 236,233,216);
   
ImageColorTransparent($zielbild,$transparent);


    ImageGIF
($zielbild) or die("Endbild nicht erzeugt!"); // Bild ausgeben
    
Imagedestroy ($zielbild); // make me scream "yeah"
?>




Nachbemerkungen:
Wie man sieht, ist das alles garnicht so schwierig. Man kann das sicherlich noch optimieren, auf andere Fehleingaben reagieren und so weiter. Aber das Tutorial sollte ja nur ein Basisverständnis mit der GDLib liefern. Die kann übrigens noch sehr viel mehr, einfach mal auf php.net schauen.

Möglich Fehlerquellen, warum obiger Code nicht funktionieren könnte: Ihr oder euer Hoster habt eine veraltetete PHP Version oder die GDLib nicht aktiv/installiert. Ausserdem darf man nicht vergessen, die Schriftart hochzuladen und den Pfad richtig einzustellen.

Achja, zum Einbinden als Signatur gibt man dann einfach den Pfad zur .php Datei an.


Ich hoffe, dieser - mein erster - Workshop war informativ und verständlich. Ansonsten hinterlasst einfach einen Kommentar.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.03.2010 - 08:39

Super, gefällt mir :-) Lange genug nach was funktionierendem gesucht^^

Portrait von Blade26
  • 28.01.2010 - 11:41

Super TUT. Das habe ich schon lange gesucht.

Portrait von icehawk2
  • 17.01.2010 - 17:00

Werde mal sehen was sich daraus machen lässt. . . Danke aufjedenfall für das tut. . .

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 26.12.2009 - 01:09

geht das also nich wenn ich jetzt aus gif png mache?? ich weiß nämlich nicht wie ich ein transparentes bild erzeugen kann so wie bei http://www.pennergame.de/headline/LGBKAI/

Portrait von time2flirt
  • 27.07.2009 - 18:29

Wird wohl nicht mehr funktionieren auch zu Zeiten 2008 nicht mehr =))

Weil der GD Support für .gif nicht mehr vorhanden ist - somit unbrauchbar

Portrait von Duddle
  • 27.07.2009 - 18:34

Das Tutorial ist also absolut unter aller Würde, weil offenbar niemand es schafft, die nicht mehr unterstützten zwei oder drei Zeilen im gesamten Code durch die neuere Version zu ersetzen? Eine absolut nachvollziehbare Argumentation!

Portrait von Dragor
  • 23.11.2008 - 15:01

super tut!!! echt nice beschrieben

Portrait von Top_Gun
  • 25.08.2008 - 15:07

Leicht verständlich und doch ausführlich und anschaulich erklärt. Danke

Portrait von Nachtfuchs
  • 21.03.2008 - 23:39

Dankeschön fürs Tut!

Portrait von Leinemann
  • 08.01.2008 - 12:44

Schöne Lösung. Gefällt mir wirklich gut und man kann es in einigen Foren sogar einbauen. Dafür gibt es von mir einen "DAUMEN HOCH".

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 08.06.2007 - 03:34

Sehr schönes Tutorial, kann's zwar im Moment nicht anwenden, aber später werde ich garantiert noch einmal darauf zurückgreifen.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.04.2007 - 11:47

Wow das das so einfach ist hätte ich nicht gedacht. *Daumen hoch*

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.02.2007 - 19:32

sieht gut aus leider hab ich keinen webspace mit der gd bibliothek :(

Portrait von CIX88
  • 11.12.2006 - 20:35

Ergänzung zum Tutorial:

Beim Einsatz von imagettftext() kann es passieren, dass die Schrift später nicht angezeigt wird.

Warum ?

Einige Server wollen es, dass man hier den absoluten Pfad zur TFF angibt.

Sollten andere Bildformate (JPEG oder PNG) gewählt werden, dann anstelle von ImageCreate() besser ImageCreateTrueColor() benutzen.

Warum ?

ImageCreate() unterstützt nur 256-Farben.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.12.2006 - 20:05

Ist echt gut geworden, von mir 4 Punkte!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.09.2006 - 08:07

Sehr schöner Workshop, leicht verständlich...
Ich gebe 5 Punke :)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.08.2006 - 18:39

Danke für den guten Workshop nach soetwas hab ichs chon lange gesucht. :-)

gruß

web

Portrait von Schrottie
  • 18.08.2006 - 13:11

Sehr schöner Workshop für anfänger leicht verständlich und übersichtlich geschrieben. Das Tüpfelchen auf dem I wäre noch ein Screen des Endergebnis.

Portrait von Duddle
  • 18.08.2006 - 14:16

Ganz am Anfang ist doch ein Bild. Genau das ist das Endergebnis (nur dynamisch ist es nicht, das stimmt). Ansonsten: die Technik benutze ich gerade in meiner Signatur, die URL dazu ist derzeit http://duddle.pytalhost.com/dynsig.php (Stand August 2006)

Portrait von b1gag3
  • 16.08.2006 - 16:51

sehr gut geschrieben und für mich auch verständlich ;) ... btw bei Schritt 7 passt der Link nicht richtig.
Aber sonst beide Daumen hoch!

x
×
×