Programmierung, Tutorials, PHP

How To: Mit PHP Text zu einem Bild hinzufügen

Inhalt

An vie­len Stellen hat man gese­hen, dass es vie­le Bilder gibt, denen ein Text dyna­misch hin­zu­ge­fügt wur­de. Zum Beispiel ein Wasserzeichen auf einem Bild oder ein Wunschskript, bei dem der Benutzer sei­nen Namen schreibt und der Name auto­ma­tisch zu einem Bild hin­zu­ge­fügt wird. Heute wer­de ich Dir zei­gen, wie Du mit PHP Text zu einem Bild hin­zu­fü­gen kannst. Am Ende des Artikels kannst Du auch die Quelldatei herunterladen.

Unser Ziel ist es also, dass der Benutzer einen belie­bi­gen Namen in ein Textfeld ein­gibt und dann auf "Submit" klickt, der Name wird dann auto­ma­tisch an einer bestimm­ten Stelle dem Bild hin­zu­ge­fügt. Ich neh­me an, dass du bereits einen loka­len Server wie xampp oder wamp instal­liert hast. Schreibe also zuerst einen ein­fa­chen HTML-Code wie unten und spei­che­re ihn als index.php.

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>Add text to image by using PHP</title>
    </head>
    <body>
        <form action="index.php" method="post">
            <input type="text" name="user_name">
            <button type="submit">Set Name</button>
        </form>
        
    </body>
</html>

Der obi­ge Code ent­hält ein Formular mit einem Textfeld und einer Schaltfläche "Submit". Wir haben die Aktion auf die­sel­be Datei gesetzt, d.h. index.php und die Methode soll­te POST sein. Jetzt wer­den wir den PHP-Code schrei­ben, um die POST-Anfrage zu bearbeiten.

<?php
    
    //check if method is post
    <span class="wpsdc-drop-cap">i</span>f($_POST){
        
        //get username
        $user_name = $_POST['user_name'];


        //show the user text on image
        echo '<img src="img.php?user='.$user_name.'">';

    }else{
        echo '<img src="img.php">';
    }
?>

Der obi­ge Code prüft, ob die Methode POST ist oder nicht. Wenn ein Benutzer einen Text ein­gibt und auf "Submit" klickt, dann spei­chert die Variable $_POST den Text in user_name. Im Grunde genom­men ist $_POST ein Array, das die vom Benutzer ein­ge­ge­be­nen Daten im Element user_name spei­chert. Wenn die Methode nicht POST ist, wird der Code im Abschnitt else ange­zeigt. Im Folgenden fin­dest Du den voll­stän­di­gen Code der index.php Datei.

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Add text to image by using PHP</title>
    </head>
    <body>
    
        <?php
    
            //check if method is post
            if($_POST){
                
                //get username
                $user_name = $_POST['user_name'];
                //show the user text on image
                echo '<img src="img.php?user='.$user_name.'">';
            }else{
                echo '<img src="img.php">';
            }
        ?>
        <form action="index.php" method="post">
            <input type="text" name="user_name">
            <button type="submit">Set Name</button>
        </form>
        
    </body>
</html>

Der Abschnitt else ent­hält ein Bild. Beachten Sie aber, dass wir anstel­le einer nor­ma­len Bilddatei, d.h. .jpg, .gif, .png, eine PHP-Datei ver­wen­den. Hier funk­tio­niert die Datei img.php als Bild, indem sie ihre Kopfzeile durch PHP ändert. Erstelle also eine wei­te­re Datei mit dem Namen img.php an der glei­chen Stelle, an der sich index.php befindet.

Zuerst müs­sen wir dem Browser mit­tei­len, dass dies eine Bilddatei ist. Also fügen wir einen Header am Anfang des Skripts ein.

header("Content-type: image/jpeg");

 

Da wir den Content-Type der Datei mit dem obi­gen Code auf image/jpeg gesetzt haben, wird ein Browser, der die Datei img.php öff­net, die Datei für ein jpeg-Bild hal­ten. Wenn wir image/png ein­stel­len, wird der Browser die Datei für eine png-Datei halten.

Danach erstellst Du einen Ordner namens images, in dem sich index.php und img.php befin­den. In die­sen Ordner kopierst Du ein jpeg-Bild. Ich habe ein Bild kopiert und es base-img.jpg genannt. Erstelle eine Variable und spei­che­re den Speicherort des Bildes wie folgt:

$img_path = "images/base-img.jpg";

 

Hier ver­wen­den wir eine benut­zer­de­fi­nier­te True-Type-Schriftart. Erstelle also einen wei­te­ren Ordner namens font und kopie­re eine belie­bi­ge Schriftart in die­sen Ordner. Ich habe eine Schriftart kopiert und sie in font umbe­nannt. Du kannst den ursprüng­li­chen Namen der Schriftart ver­wen­den oder sie in einen belie­bi­gen Namen umbe­nen­nen. Danach erstel­le eine Variable namens $font_path und spei­chern den Speicherort der Schriftart wie folgt:

$font_path = realpath("font/font.ttf");

Hier kann man sehen, dass ich real­path() ver­wen­de. Hier gibt real­path den abso­lu­ten Speicherort der Schriftartdatei zurück, wäh­rend der rela­ti­ve Pfad die URL der Website anstel­le eines inter­nen Pfades anzeigt.

Danach wer­den wir mit der Funktion image­crea­tef­rom­j­peg() ein Bildobjekt erstel­len. Beachte, dass wir das jpeg-Format ver­wen­den, wes­halb wir die Funktion image­crea­tef­rom­j­peg() benut­zen. Wenn wir Text in ein png-Bildformat ein­fü­gen wol­len, dann ver­wen­de die Funktion image­crea­tef­rompng().

Die Funktion image­crea­tef­rom­j­peg() benö­tigt den Speicherort der Bilddatei, des­halb haben wir $img_path als Speicherort des Bildes übergeben.

$jpg_img = imagecreatefromjpeg($img_path);

 

Angenommen, ein Benutzer gibt sei­nen Namen ein und klickt auf "Submit". In der Datei index.php spei­chert die Variable $_POST den Namen. Wir kön­nen den Namen mit fol­gen­dem Code abrufen:

$user_name = $_POST['user_name'];

 

Wir wer­den den $user_name an img.php als Abfrage-String wie folgt übergeben:

//show the user text on image
echo '<img src="img.php?user='.$user_name.'">';

 

In der Datei img.php wird mit der Funktion isset() geprüft, ob die Abfragevariable user gesetzt ist oder nicht. Wenn ja, dann wer­den die Daten in der Variablen $text gespei­chert. Siehe den fol­gen­den Code:

if(isset($_GET['user'])){
    $text = $_GET['user'];
}

Wie kann man die Farbe für dynamisch hinzugefügten Text auf einem Bild in PHP festlegen?

Nun müs­sen wir die Textfarbe fest­le­gen. Mit der Funktion image­co­lo­ral­lo­ca­te() kön­nen wir die gewünsch­te Farbe für den Text fest­le­gen. Er nimmt das Bild und die Farbe als Parameter an. Der ers­te Parameter soll­te also das mit dem Befehl image­crea­tef­rom­j­peg() erstell­te Bild sein. Siehe den fol­gen­den Code.

$font_color = imagecolorallocate($jpg_img, 255, 255, 255);

Hier spei­chert $jpg_img das Bild mit der Funktion image­crea­tef­rom­j­peg() und über­gibt den RGB-Wert. Der RGB-Wert ist in die­sem Fall 255, 255, 255. Die Farbe wird also weiß sein.

Wie fügt man Text zum Bild hinzu?

Mit der Funktion imagettftext() kön­nen wir einem Bild einen Text zuwei­sen. Die Syntax der Funktion lautet:

imagettftext ( resour­ce $image , float $size , float $ang­le , int $x , int $y , int $color , string $font­fi­le , string $text ) : array

Unser Code soll­te also wie folgt aussehen:

imagettftext($jpg_img, 30, 0, 10, 60, $font_color, $font_path, $text);

Der ers­te Parameter ist $jpg_img, der das mit der Funktion image­crea­tef­rom­j­peg() erstell­te Bild spei­chert. Der zwei­te Parameter ist 30, der die Schriftgröße angibt. Wenn Du den Text dre­hen willst, dann kannst Du dem Parameter eine Zahl über­ge­ben. Da wir den Text nicht dre­hen wol­len, über­ge­ben wir 0. Der 4. und 5. Parameter ist für die Position des Textes, an der unser Text anzeigt wer­den soll, und der Rest des Parameters ist ziem­lich einfach.

Wenn Du einen ande­ren Text an einer ande­ren Position mit einer ande­ren Schriftfarbe oder ‑grö­ße ein­fü­gen willst, dann erstel­le eine wei­te­re Zeile mit imagettftext(). Wenn Du eine ande­re Schriftart oder ‑far­be willst, ände­re den Schriftpfad zu einer ande­ren Schriftart oder ände­re den RGB-Wert in imagecolorallocate($jpg_img, 150, 200, 230);

Wie findet man die x- und y‑Koordinaten eines Bildes mit dem Paint-Werkzeug?

Öffne das Bild in Paint. Bewege den Mauszeiger auf das Bild, wo du einen Text hin­zu­fü­gen möch­test. Schau in die lin­ke unte­re Ecke des Paint-Fensters. Dort kannst Du den Positionswert able­sen. Verwende den Positionswert für imagettftext().

find the x, y coordinate of the image using Paint tool

Vollständiger Code der Datei img.php

<?php
    
    header("Content-type: image/jpeg");
    $img_path = "images/base-img.jpg";
    $font_path = realpath("font/font.ttf");
    $jpg_img = imagecreatefromjpeg($img_path);
    if(isset($_GET['user'])){
        $text = $_GET['user'];
        $font_color = imagecolorallocate($jpg_img, 255, 255, 255);
        imagettftext($jpg_img, 30, 0, 10, 60, $font_color, $font_path, $text);
    }
    imagejpeg($jpg_img);
    imagedestroy($jpg_img);
?>

Die Funktion imagejpeg($jpg_img) erstellt wie­der­um das Bild mit dem Text dar­auf. Zum Schluss wird das Bild mit der Funktion imagedestroy($jpg_img) zerstört.

Wenn Du auf ein Problem stößt, wie z.B. dass das Bild nicht ange­zeigt wird oder der Text nicht auf dem Bild erscheint, ver­su­che die Zeile ("//") in img.php wie folgt zu kommentieren:

//header("Content-type: image/jpeg");