kostenloser Webspace werbefrei: lima-city


Text in Bild - Dynamische Höhe

lima-cityForumProgrammiersprachenPHP, MySQL & .htaccess

  1. Autor dieses Themas

    m*****z

    Also kurz beschrieben:
    Ich suche eine Möglichkeit einen dynamisch langen Text in ein Bild zu schreiben, das eine feste Größe hat.

    Sprich: Text lang -> Bild mit Text 300 x 500 Pixel
    Sprich: Text kurz -> Bild mit Text 300 x 250 Pixel

    Wie realisiere ich das am dümmsten?

    Vielleicht sollte ich noch sagen, das ich einen transparenten Hintergrund brauche, also kein Bild als Ausgangspunkt, sondern ganz neu erstellen.

    Ich Danke euch jetzt schon einmal für eure Mühe.

    Beitrag zuletzt geändert: 28.8.2012 15:54:16 von monkeyz
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. browsergame-entwickler

    Kostenloser Webspace von browsergame-entwickler, auf Homepage erstellen warten

    browsergame-entwickler hat kostenlosen Webspace.

    meinst du mit php eine grafik programieren?
    Warum net gleich mit gimp machen?

  4. m******e

    monkeyz schrieb:
    Also kurz beschrieben:
    Ich suche eine Möglichkeit einen dynamisch langen Text in ein Bild zu schreiben, das eine feste Größe hat.

    Sprich: Text lang -> Bild mit Text 300 x 500 Pixel
    Sprich: Text kurz -> Bild mit Text 300 x 250 Pixel

    Wie realisiere ich das am dümmsten?
    Die Antwort haste Dir doch schon selbst gegeben, oder? (Die Frage war gemeint)

    Zusammenfassung:
    Du möchtest also mit PHP ein in der Breite dynamisches Bild erzeugen, abhängig von der Länge des Textes?
    Wenn dem so ist, dann frag das doch auch. Denn sonst gibt es noch viele weitere schlaue Fragen, oder wohlmögliche Antworten wie den Gimp-Kram.
  5. Autor dieses Themas

    m*****z

    menschle schrieb:
    Du möchtest also mit PHP ein in der Breite dynamisches Bild erzeugen, abhängig von der Länge des Textes?
    Wenn dem so ist, dann frag das doch auch. Denn sonst gibt es noch viele weitere schlaue Fragen, oder wohlmögliche Antworten wie den Gimp-Kram.

    Nein ich möchte ein Bild, mit PHP, in einer dynamischen Höhe erstellen.

    browsergame-entwickler schrieb:
    meinst du mit php eine grafik programieren?
    Warum net gleich mit gimp machen?

    Ja per PHP und nein Gimp scheidet aus. Außerdem ist nach PHP gefragt und nicht nach Gimp.

    Also es handelt sich um meine Webseite http://www.dailywiki.de/, auf der ich ,nach Hinweis von Menschle (http://www.lima-city.de/thread/dailywiki-lustige-infos-und-unnuetze-gesetze), die Weisheiten täglich um null Uhr, alternativ zum javascript, als Bild veröffentlichen möchte. Dabei sollen die Bilder (transparenter Hintergrund) mit einer festen Breite und einer dynamischen Höhe kommen, damit man sie in ein Design einpassen kann und man nicht jeden Tag die Breite des Bildes ändern sollte.

    Also sagen wir der Text: "Nur etwa 3 Prozent aller Vögel besitzen einen Penis. In der Regel besitzen Vögel eine kleine Körperöffnung, die sie zur Fortpflanzung an die Öffnung des Weibchens halten. " ist zu lang, um auf der schriftgröße 20, in einer reihe, auf einer Breite von 300 Pixeln dargestellt zu werden.... also soll der Text nach 300 Pixeln Breite einen Zeilenumbruch machen und so in die Höhe wachsen und nicht in die Breite.

    Ich hoffe nun ist es verständlich ;)

    Leider habe ich vom Erstellen von Bildern mittels PHP so viel Ahnung wie die Kuh von der Raumfahrt, also wollte ich euch um Hilfe bitten.
  6. Ginge es nur um dynamische Breite, wäre es mit dem Beispiel aus dem Manual zu imagefontwidth() leicht zu lösen.

    Knackpunkt bei dir ist, daß ein String, der auf einem Bild untergebracht werden soll, nicht automatisch umgebrochen wird, wenn er für das Bild zu breit ist.

    Du müßtest zuerst mit ]imagefontwidth und ]imagefontheight() die benötigte Höhe und Breite für jedes Zeichen ermitteln. deinen Text dementsprechend aufteilenund die einzelnen Textteile untereinander positionieren. (Zeichenzahl pro Zeile (300px - 2*Rand)/Zeichenbreite; Bildhöhe = 2 * Rand + Stringlänge/Zeichen pro Zeile )

    Den String zu teilen, ist kein großer Akt. Aufwendig wird es, ihn nicht stumpf bei, z.B. 20 Zeichen zu zerhacken, sondern ihn sinnvoll an Wortgrenzen zu trennen, damit das Ergebnis auch halbwegs aussieht.
    .
  7. Autor dieses Themas

    m*****z

    Ey danke für den Tipp ^^
    Aber ich glaube es wäre sinniger nicht jedes Zeichen zu berechnen sondern mit explode() nur jedes Wort, damit könnte man dann auch den besten Zeilenumbruch berechnen.
  8. m******e

    monkeyz schrieb:
    Also es handelt sich um meine Webseite http://www.dailywiki.de/, auf der ich ,nach Hinweis von Menschle (http://www.lima-city.de/thread/dailywiki-lustige-infos-und-unnuetze-gesetze), die Weisheiten täglich um null Uhr, alternativ zum javascript, als Bild veröffentlichen möchte.

    Dabei sollen die Bilder (transparenter Hintergrund) mit einer festen Breite und einer dynamischen Höhe kommen, damit man sie in ein Design einpassen kann und man nicht jeden Tag die Breite des Bildes ändern sollte.
    Und *zack* da isses, Dein Script.

    Zugegebenermaßen hat es mich dann doch etwas gefordert.
    Zunächst hat der LimaServer rumgezickt und nüx gemeckert - was auchn Wunder bei ner *.htaccess im Home-Verzeichnis: "Fehler nö Danke!", was mir aber erst aufging, als ich testweise andere Server befragte.
    :wall: :lol:
    Dann war die Sache mit der (HG)Transparenz für mich neu, und die ersten Versuche (Fehlerhafte Scriptbeispiele) wollten nicht gehorchen. Weiterhin ist die Schriftgröße bei der vorgegebenen Breite etwas unglücklich gewählt, denn ein Text- bzw. Wort-Zeilenumbruch funzt bei zu erstellenden Bildern nicht nach 300 Pixeln Breite, sondern nach Anzahl der Zeichen, weil es ja noch Text ist. Hier muss auch an die zu wählende Schriftart und die Schriftlaufweite gedacht werden, da ein i ja nicht so breit wie ein M ist.

    Als ich endlich fertig war, war ich völlig fertig; alles lief, aber Lima wollte ne Extrawurscht - in Form von Sonderzeichen. Also wurde dem Script noch UTF-8 verpasst, und zusätzlich die Meckerzeichen-Quadrate maskiert. *lufthol*
    Selbstverständlich handlete dann ein anderer Server noch die Wort-Zeilenumbrüche anders, was an geringfügig anders dargestellter Schriftgewichtung beim erstellen des Bildes liegt.
    Zuguterletzt offenbart die Schrift ihr wahres Gesicht - wenn das transparente Bild über einem Farbverlauf dargestellt wird - womit sich allerdings, meiner Meinung nach, leben lässt.

    Inzwischen ist das kleine Scriptchen schon recht komfortabel geworden, und ich kann Dir nur ans Herz legen, Deinen Nutzern unterschiedliche Formate (Schriftgröße & Farbe, Bilddimensionen) anzubieten.
    Was die ganze Sache beschleunigte, war, dass ich selbst sowas bereits im vollautomatischem Einsatz habe. Allerdings werden da die Bilder per Cronjob nur alle 10 Minuten neu erzeugt, und nicht bei jedem Seitenaufruf generiert.
    (Man denke dabei an DDos usw.)

    Die Schriftart (Font) muss ebenfalls auf dem Server liegen.

    Quelltext
    <?php
    function headline($which) {
    
    #Config. Angabe in px
    $pos_x = '10'; // links
    $pos_y = '30'; // oben
    $drehung = '0';
    $fontsize = '20';
    $font = 'verdana.ttf'; // Schriftart
    $wrapword = '20'; // Wortumbruch ab Zeichen
    $weite = '300';
    $hoehenorm = '250';
    $hoehemax = '500';
    $laenge = '100'; // Hoehe aendern ab Zeichen X. Schaetzwert. Zum testen Wert auf 1000 stellen.
    // $laenge = '1000';
    
    $which = wordwrap($which,$wrapword);
    if (strlen($which)>$laenge){$hoehenorm=$hoehemax;};
    
    # Sonderzeichen maskieren fuer ExtrawurstServer
    $which=str_replace('ä','&#228;',$which);
    $which=str_replace('Ä','&#196;',$which);
    $which=str_replace('ö','&#246;',$which);
    $which=str_replace('Ö','&#214;',$which);
    $which=str_replace('ü','&#252;',$which);
    $which=str_replace('Ü','&#220;',$which);
    $which=str_replace('ß','&#223;',$which);
    $which=str_replace('´','&#180;',$which);
    $which=str_replace('§','&#167;',$which);
    $which=str_replace('€','&#8364;',$which);
    $which=str_replace('°','&#176;',$which);
    $which=str_replace('®','&#174;',$which);
    $which=str_replace('©','&#169;',$which);
    $which=str_replace('¼','&#188;',$which);
    $which=str_replace('½','&#189;',$which);
    $which=str_replace('¾','&#190;',$which);
    $which=str_replace('µ','&#181;',$which);
    $which=str_replace('¶','&#182;',$which);
    $which=str_replace('·','&#183;',$which);
    $which=str_replace('±','&#177;',$which);
    $which=str_replace('²','&#178;',$which);
    $which=str_replace('³','&#179;',$which);
    $which=str_replace('¢','&#162;',$which);
    $which=str_replace('£','&#163;',$which);
    $which=str_replace('¤','&#164;',$which);
    $which=str_replace('¥','&#165;',$which);
    $which=str_replace('¦','&#166;',$which);
    /* Weitere Zeichen http://de.selfhtml.org/html/referenz/zeichen.htm
    $which=str_replace('','',$which);
    */
        #Header senden
        header("Content-type: image/png; charset=utf-8");
    
        #Bild erstellen (Breite, Hoehe)
        $im = imagecreate ($weite, $hoehenorm);
    
        #Hintergrundfarbe definieren (RGB-Code)
        $grey = ImageColorAllocate ($im, 220, 220, 220);
    
        #Schriftfarbe definieren (RGB-Code)
        $fontcolor = ImageColorAllocate ($im, 0, 0, 0);
    
        #Text in Bild einbauen
        ImageTTFText ($im, $fontsize, $drehung, $pos_x, $pos_y, $fontcolor, $font, $which);
    
        imagecolortransparent($im, $grey);
    
        #PNG erstellen | Kompressionsstufe 0 - 9
        imagepng($im,NULL,9);
    
        #Fertig
        ImageDestroy ($im);
    }
    #Bild ausgeben
    echo headline("Nur etwa 3 Prozent aller Vögel besitzen einen Penis. In der Regel besitzen Vögel eine kleine Körperöffnung, die sie zur Fortpflanzung an die Öffnung des Weibchens halten.");
    
    /* Zum Testen
    echo headline("Nur etwa 3 Prozent aller Vögel besitzen einen Penis.");
    echo headline("Test1 Test2 Test3 Test4 Test5 A B C Test6 Test7 Test8 Test9 Test10 Test11 Test12 Test13 Test14 Test15 Test16 Test17");
    echo headline("¢£¤¥¦±²³·¶®© ¼½¾µ^°´`'\"<>!§$ %&/()=?+*#-_|€@~");
    */
    ?>


    €dit: ^^ 4 Bier später ;)
    €dit2: $font zum config hinzugefügt


    Beitrag zuletzt geändert: 29.8.2012 23:15:36 von menschle
  9. Autor dieses Themas

    m*****z

    Ich danke dir vielmals ;)
    Wie kann ich dir das denn Danken ??

    Beitrag zuletzt geändert: 29.8.2012 23:33:13 von monkeyz
  10. m******e

    monkeyz schrieb:
    Ich danke dir vielmals ;)
    Wie kann ich dir das denn Danken ??
    ^^ Die nächsten 4 Bier zahlst Du. :wink:
  11. Autor dieses Themas

    m*****z

    Und wie? HAHA

    Hier hast du sie:
    :prost::prost::prost::prost:

    EDIT:
    So habe das ganze Script noch einmal verbessert ;)
    Die Höhe des Bildes verschiebt sich jetzt nicht stumpf um 2 Stufen, sondern theoretisch ins unendliche. Pro neue Zeile gibt es eine neue Höhe dazu. So sind dem Text auch über den 500 Pixeln keine Grenzen gesetzt.
    <?php
    function headline($which) {
    
    #Config. Angabe in px
    $pos_x = '10'; // links
    $pos_y = '30'; // oben
    $drehung = '0';
    $fontsize = '15';
    $font = './verdana.ttf'; // Schriftart
    $wrapword = '25'; // Wortumbruch ab Zeichen
    $weite = '300';
    $hoehenorm = '50';
    $laenge = '25'; // Hoehe aendern ab Zeichen X. Schaetzwert. Zum testen Wert auf 1000 stellen.
    $anzahl = '0';
    
    $which = wordwrap($which,$wrapword);
    
    # länge und norm dynamisch erhöhen .... norm + 23 | länge + 25
    while(strlen($which)>$laenge){
    $hoehenorm=$hoehenorm+23;
    $laenge=$laenge+25;
    }
    
    # Sonderzeichen maskieren fuer ExtrawurstServer
    $which=str_replace('ä','&#228;',$which);
    $which=str_replace('Ä','&#196;',$which);
    $which=str_replace('ö','&#246;',$which);
    $which=str_replace('Ö','&#214;',$which);
    $which=str_replace('ü','&#252;',$which);
    $which=str_replace('Ü','&#220;',$which);
    $which=str_replace('ß','&#223;',$which);
    $which=str_replace('´','&#180;',$which);
    $which=str_replace('§','&#167;',$which);
    $which=str_replace('€','&#8364;',$which);
    $which=str_replace('°','&#176;',$which);
    $which=str_replace('®','&#174;',$which);
    $which=str_replace('©','&#169;',$which);
    $which=str_replace('¼','&#188;',$which);
    $which=str_replace('½','&#189;',$which);
    $which=str_replace('¾','&#190;',$which);
    $which=str_replace('µ','&#181;',$which);
    $which=str_replace('¶','&#182;',$which);
    $which=str_replace('·','&#183;',$which);
    $which=str_replace('±','&#177;',$which);
    $which=str_replace('²','&#178;',$which);
    $which=str_replace('³','&#179;',$which);
    $which=str_replace('¢','&#162;',$which);
    $which=str_replace('£','&#163;',$which);
    $which=str_replace('¤','&#164;',$which);
    $which=str_replace('¥','&#165;',$which);
    $which=str_replace('¦','&#166;',$which);
    /* Weitere Zeichen http://de.selfhtml.org/html/referenz/zeichen.htm
    $which=str_replace('','',$which);
    */
        #Header senden
        header("Content-type: image/png; charset=utf-8");
    
        #Bild erstellen (Breite, Hoehe)
        $im = imagecreate ($weite, $hoehenorm);
    
        #Hintergrundfarbe definieren (RGB-Code)
        $grey = ImageColorAllocate ($im, 255, 255, 255);
    
        #Schriftfarbe definieren (RGB-Code)
        $fontcolor = ImageColorAllocate ($im, 0, 0, 0);
    
        #Text in Bild einbauen
        ImageTTFText ($im, $fontsize, $drehung, $pos_x, $pos_y, $fontcolor, $font, $which);
    
    
    
        #PNG erstellen | Kompressionsstufe 0 - 9
        imagepng($im,NULL,9);
    
        #Fertig
        ImageDestroy ($im);
    }
    #Bild ausgeben
    /*echo headline("Nur etwa 3 Prozent aller Vögel besitzen einen Penis. In der Regel besitzen Vögel eine kleine Körperöffnung, die sie zur Fortpflanzung an die Öffnung des Weibchens halten.");
    
    
    echo headline("Nur etwa 3 Prozent aller Vögel besitzen einen Penis.");*/
    
    echo headline("Test1 Test2 Test3 Test4 Test5 A B C Test6 Test7 Test8 Test9 Test10 Test11 Test12 Test13 Test14Test1 Test2 Test3 Test4 Test5 A B C Test6 Test7 Test8 Test9 Test10 Test11 Test12 Test13 Test14Test1 Test2 Test3 Test4 Test5 A B C Test6 Test7 Test8 Test9 Test10 Test11 Test12 Test13 Test14Test1 Test2 Test3 Test4 Test5 A B C Test6 Test7 Test8 Test9 Test10 Test11 Test12 Test13 Test14");
    /* Zum Testen
    echo headline("¢£¤¥¦±²³·¶®© ¼½¾µ^°´`'\"<>!§$ %&/()=?+*#-_|€@~");
    */
    ?>


    Ich weise mal darauf hin, das ich die Schriftgröße und die Hintergrundfarbe, zu Testzwecken, geändert habe ;)
    Ein paar Feinjustierungen sind wohl noch von Nöten aber funktionieren tut es bislang ganz gut :):thumb:

    Beitrag zuletzt geändert: 30.8.2012 1:06:09 von monkeyz
  12. m******e

    monkeyz schrieb:
    So habe das ganze Script noch einmal verbessert ;)
    Die Höhe des Bildes verschiebt sich jetzt nicht stumpf um 2 Stufen, sondern theoretisch ins unendliche. Pro neue Zeile gibt es eine neue Höhe dazu. So sind dem Text auch über den 500 Pixeln keine Grenzen gesetzt.
    ...
    Ich weise mal darauf hin, das ich die Schriftgröße und die Hintergrundfarbe, zu Testzwecken, geändert habe ;)
    Ein paar Feinjustierungen sind wohl noch von Nöten aber funktionieren tut es bislang ganz gut :):thumb:
    Sehen wollen! :biggrin:

    Nee, musst nicht zwangsläufig. Ich kanns mir ja auch kopieren und dann anschauen. :wink:

    Beitrag zuletzt geändert: 30.8.2012 1:29:14 von menschle
  13. Autor dieses Themas

    m*****z

    Kannst du aber: http://www.dailywiki.de/image300.php

    Oder besser gesagt:
    Nutze dieses Script auf deiner Webseite und du wirst es sehen: http://www.dailywiki.de/eigene.html

    Beitrag zuletzt geändert: 30.8.2012 1:36:53 von monkeyz
  14. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!