Dynamische Bilder

  • Tutorial

  • Starwalker
  • 4787 Aufrufe 2 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Dynamische Bilder

    So, ich kann zwar auch nicht viel PHP, aber will euch trotzdem mal in die Kunst der dynamischen Bilder einweisen.

    Als erstes brauchen wir ein Hintergrundbild und eine Schriftart, die wir benutzen können.

    Sucht euch einfach eine bei z.B. dafont aus.

    Ein Hintergrundbild kann einfach eine weiße Fläche oder auch eine Figur usw. sein.

    Mangels Kreativität hab ich einfach mal diese Fläche hier genommen:


    So, jetzt beginnen wir mit dem Code.
    Erstellt eine neue Datei mit der Endung .php und öffnet sie in eurem Editor (Ich benutze einfach notepad.exe)

    Am besten isses, ihr kopiert den Hintergrund, die neu erstellte .php-datei(Ich nenn sie mal bild.php) und alle weiteren Projektdateien in einen neuen ORdner.

    Der anfängliche Code sieht nun so aus:

    PHP-Quellcode

    1. header("Content-type: image/png"); // Das sagt dem BRowser, was das überhaupt für ne Datei ist
    2. $im=imagecreatefrompng("./bg.png"); // Woraus wir das Bild erstellen, $im ist eine Variable


    So, jetzt können wir das mal auf unseren Image-fähigen Wepsace kopieren, um zu sehen ob es geht. (ich benutze, wie die Profis sehen können, die gdlib)

    Jetzt brauchen wir usere Schriftart, die downloaden wir und kopieren sie in den bereits erwähnten Ordner.

    Ich hab mal Visitor gewählt (visitor2.ttf), da die Schriftart schön klein ist.

    Jetzt können wir schonmal Text erstellen:

    Zu unserem Code kommt:

    PHP-Quellcode

    1. $textcol=imagecolorallocate($im,0,0,0); // Hier bestimmen wir die Farbe des Textes in RGB-Schreibweise, in dem Fall schwarz
    3. imagettftext($im,10,0,20,20,$textcol,"./visitor2.ttf","$data[0]"); /*
    4. Tadaa unser erster Text
    5. Die erste Zahl bewirkt die Schriftgröße, die dritte den Abstand nach unten, die vierte den nach rechts (Oder war es andersrum? )
    6. Das vierte ist der Dateiname der Schriftart, das fünfte ist der Text, in dem Fall eine Variable
    7. */


    By the way: // ist in Php ein Kommentar über eine Zeile
    /* Ist
    ein
    Kommentar
    über
    mehrere
    Zeilen */

    So, jetzt ist unsere bild.php fast fertig, ihr könnt sie nun ergänzen, wir ihr wollt. Ihr müsst nur dran denken, das $data[0] immer +1 zu erhöhen oder einen absoluten Text einfügen.

    An den Anfang des COdes kommt jetzt noch das hier:

    PHP-Quellcode

    1. $data=explode(",",base64_decode($_GET['data']));

    Durh diese Codezeile können wir später ein Formular bauen, mit dem wir die Variablen weitergeben. Es ist in base64 codiert, damit nicht die ganzen Daten offenliegen und er bekommt es von der Variable "data", sodass unsere Url später etwa so aussehen wird:
    Xxxxxxxx.de - Informationen zum Thema . Diese Website steht zum Verkauf!
    Ganz unten kommt noch:

    PHP-Quellcode

    1. imagepng($im);

    um zum Schluss das png-Bild zu generieren.

    Um den ganzen Code kommt der HTML-Tag <?php und ?> .

    Jetzt hätten wir unsere bild.php-Datei fertig.

    Jetzt kommt das Formular, es ist eigentlich eine einfache HTML-Datei mit PHP-Elementen.

    HTML-Quellcode

    1. <html>
    2. <head></head>
    3. <body>
    4. </body>
    5. </html>


    Dazu kommt ein Formular, sicher wissen die meisten HTML-Nutzer wie das geht:

    HTML-Quellcode

    1. <form method="post" action="">
    2. <input type="text" name="test" size="20" style="border:1px solid black;">
    4. <input type="submit" value="Submit!" style="border:1px dashed #000000;">
    5. </form>


    Das war erstmal das Formular, heir ist sicher keine Erklärung nötig.

    Jetzt könnt ihr irgendwo in eurem Dokument den folgenden PHP-Code einfügen:

    PHP-Quellcode

    1. <?php
    2. if(!empty($_POST['test'])){
    3. //$_POST=str_replace(","," ",$_POST);
    4. $data=base64_encode($_POST['test'].);
    5. echo "http://eure-url.de/bild.php?data=".$data;}else{
    6. ?>
    8. <?php
    9. }
    10. ?>


    Das sorgt dafür, die ganzen Daten in HTML-Code umzuwandeln. Ihr könntet den ganzen Code natürlich auch irgendwo in einen Link einfügen,d amit das ganze bereits als link anklickbar ist.

    ICh hoffe, ich sehe hier ein paar Ergebnisse von euch.

    P.S.: Kopiert dieses Tutorial nirgends und vorallem: Wenn euer Webspace kein gdlib unterstützt, weiß ich auch nicht weiter. Sorry!

  • Hi,
    gute Arbeit soweit.
    Ich hoffe man darf ein bisschen konstruktive Kritik üben und ein paar Tipps geben :)
    Ersteinmal zu,
    Hat mein Webspace GD-Lib installiert, bzw. darf ich die PNG-Bilder erstellen?
    Dazu einfach mal folgenden Code ausführen und schauen, was raus kommt:

    PHP-Quellcode

    1. <?php
    2. error_reporting(E_ALL);
    3. header('Content-type: text/plain');
    4. echo 'GD-Lib is';
    5. if(function_exists('gd_info')) {
    6. echo ' installed'."\nMore Informations:\n";
    7. foreach(gd_info() as $key => $value) {
    8. if($value == 1) $value = 'enabled';
    9. elseif(!$value) $value = 'disabled';
    10. echo "\t".$key.' => '.$value."\n";
    11. }
    12. }
    13. else echo 'n\'t installed';
    14. ?>
    Alles anzeigen

    Sieht dann ungefähr so aus stuff.personal-php.de/gd_info.php

    Dann würde ich bild.php in die Datei mit der Form packen. Denn, wenn man die Bilder mit Link öffentlich zugänglich macht, zeigt die Erfahrung, dass viele sich den Link zum Beispiel in die Sig oder so kopieren. Traffic bezahlen sie jedoch nicht.

    Zum Schluss noch zu der base64 Geschichte.
    base64_decode(); gibt beim Fehlgeschlagendem Versuch kein Text, sondern false zurück. Hier sollte man mit einer Abfrage prüfen, ob auch binärer Text wieder asugegeben wird. Außerdem prüfen, ob die GET-Variable übergeben wurde, da ein Zugriffsversuch auf einen nicht-vorhandenen Index ein notice-Error zur Folge ist.

    PHP-Quellcode

    1. if(isset($_REQUEST['data'])) {
    2. $data = base64_decode($_REQUEST['data']);
    3. if(!$data) die('Invalid base-code');
    4. }
    5. else die('Kein Text übergeben');



    Ich hoffe du reißt mir jetzt nicht den Kopf ab *gg

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • Nee, ich freu mich sogar, dass jemand ein paar Verbesserungsvorschläge hat, denn das mit dem GDLib testen wusste ich noch garnicht.

    @alle:

    Es geht also so hier, wenn ich's richtig verstanden habe :D :

    PHP-Quellcode

    1. $data=explode(",",base64_decode($_GET['data']));
    2. if(isset($_REQUEST['data'])) {
    3. $data = base64_decode($_REQUEST['data']);
    4. if(!$data) die('Invalid base-code');
    5. }
    6. else die('Kein Text übergeben');