GD #3: Výpis textu do obrázku
GD knihovna je open source sloužící k dynamickému vytváření obrázku.V tomto, třetím, článku se podíváme na možnosti vykreslování textu do obrázku.
GD knihovna umožňuje, samozřejmě kromě jiných funkcí, velmi důležité funkce pro výpis textu. Text jde pomocí knihovny vypisovat několika způsoby, z nichž první jsme si ukázali v minulém článku pro výpis Hello Word.
Podpora textu je v knihovně dost velká a poskytuje všechny základní nutné funkce pro jeho pohodlné vykreslování, od vykreslování znaku až po vykreslování řetězců, nebo použití vlastního písma.
ImageChar
První, a základní funkce pro výpis textu, je bezpochyby ImageChat, která vypisuje jeden znak do zdrojového obrázku:
|
1 2 |
bool imagechar ( resource $image , int $font , int $x , int $y , string $c , int $color ) |
Vstupních parametrů je v tomto případě šest a všechny jsou povinné. Parametry určují umístění znaku, jeho velikost a barvu:
- Image – resource obrázku
- Font – použité písmo pro vykreslení
- X – levá horní souřadnice na ose x, kde bude začínat text
- Y – levá horní souřadnice na ose y, kde bude začínat text
- String – řetězec pro vypsání
- Color – barva vypsaného textu
Jednoduchý příklad vypíše náhodně rozmístěných 20 znaků, umístěných v poli $chars:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//odeslání hlaviček pro PNG soubor Header('Content-type: image/png'); //vytvoření TrueCollor obrázku $image = ImageCreateTrueColor( 300, 75 ); //Alokace bílé barva zadáním hodnot RGB $color1 = ImageColorAllocate($image, 255, 255, 255); $chars = array('a', 'b', 'c', 'd', 'e'); for( $i = 0; $i < 20; $i++ ){ //Vykreslení náhodného znaku z pole znaků na náhodné souřadnici. ImageChar( $image, 2, rand(0, 290), rand(0, 60), $chars[rand(0, count($chars))], $color1 ); } //vyreslení obrázku PNG ImagePng( $image ); |
ImageCharUp
Funkce ImageCharUp je obdobná funkci ImageChar, jenom s tím rozdílem že nevypisuje znak vodorovně, ale svisle:
|
1 2 |
bool imagecharup ( resource $image , int $font , int $x , int $y , string $c , int $color ) |
Parametry funkce jsou samozřejmě taky stejné jako u předchozí funkce:
- Image – resource obrázku
- Font – použité písmo pro vykreslení
- X – levá horní souřadnice na ose x, kde bude začínat text
- Y – levá horní souřadnice na ose y, kde bude začínat text
- String – řetězec pro vypsání
- Color – barva vypsaného textu
Ukázkový kód použitý u funkce ImageChar bychom mohli přepsat:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//odeslání hlaviček pro PNG soubor Header('Content-type: image/png'); //vytvoření TrueCollor obrázku $image = ImageCreateTrueColor( 300, 75 ); //Alokace bílé barva zadáním hodnot RGB $color1 = ImageColorAllocate($image, 255, 255, 255); $chars = array('a', 'b', 'c', 'd', 'e'); for( $i = 0; $i < 20; $i++ ){ //Vykreslení náhodného znaku z pole znaků na náhodné souřadnici. ImageCharUp( $image, 2, rand(0, 290), rand(0, 60), $chars[rand(0, count($chars))], $color1 ); } //vyreslení obrázku PNG ImagePng( $image ); |
ImageString
S funkcí ImageString jsme se setkali už v minulém článku.
Slouží pouze pro výpis textu, který je vypsán vodorovně:
|
1 2 |
bool imagestring ( resource $image , int $font , int $x , int $y , string $string , int $color ) |
Parametry funkce jsou, stejně jako u většiny funkcí pro výpis textu, opět podobné a stejně tak je podobný jejich význam:
- Image – resource obrázku
- Font – použité písmo pro vykreslení
- X – levá horní souřadnice na ose x, kde bude začínat text
- Y – levá horní souřadnice na ose y, kde bude začínat text
- String – řetězec pro vypsání
- Color – barva vypsaného textu
Ukázkový příklad opět můžeme přepsat pro použití této funkce:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//odeslání hlaviček pro PNG soubor Header('Content-type: image/png'); //vytvoření TrueCollor obrázku $image = ImageCreateTrueColor( 250, 75 ); //Alokace bílé barva zadáním hodnot RGB $color1 = ImageColorAllocate($image, 255, 255, 255); $string = "GD library"; for( $i = 0; $i <= 60; $i+=15 ){ ImageString( $image, 5, 20 + $i*2, $i, $string, $color1 ); } //vyreslení obrázku PNG ImagePng( $image ); |
Kód vykreslí prázdný obrázek, do kterého pětkrát vypíše text „GD library“.
ImageStringUp
Stejně jako k funkci ImageChar existuje ekvivalent ImageCharUp, existuje k funkci ImageString ekvivalent ImageStringUp, funkce, která umožní vypsat text svisle:
|
1 2 |
bool imagestringup ( resource $image , int $font , int $x , int $y , string $string , int $color ) |
Parametry jsou téměř stejné, jako u funkce ImageString, jenom s rozdílem hodnoty X, která značí levou dolní souřadnici:
- Image – resource obrázku
- Font – použité písmo pro vykreslení
- X – levá dolní souřadnice na ose x, kde bude začínat text
- Y – levá horní souřadnice na ose y, kde bude začínat text
- String – řetězec pro vypsání
- Color – barva vypsaného textu
Ukázkový příklad je možné zase jednoduše přepsat:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//odeslání hlaviček pro PNG soubor Header('Content-type: image/png'); //vytvoření TrueCollor obrázku $image = ImageCreateTrueColor( 250, 100 ); //Alokace bílé barva zadáním hodnot RGB $color1 = ImageColorAllocate($image, 255, 255, 255); $string = "GD library"; for( $i = 0; $i <= 230; $i+=15 ){ ImageStringUp( $image, 5, $i, 95, $string, $color1 ); } //vyreslení obrázku PNG ImagePng( $image ); |
ImageFontHeight, ImageFontWidth
Při používaní funkcí ImageChar a ImageString je používáno písmo, jehož jednotlivé znaky jsou rozměrově shodná, proto je možné zjistit jejich rozměry.
Pro zjištění velikosti písmen slouží dvě funkce:
|
1 2 |
int imagefontheight ( int $font ) int imagefontwidth ( int $font ) |
Vstupní parametr je pouze jeden, a to použitý font.
Při zkoušení ukázkových příkladů jste si mohli všimnout nechtěného efektu, kdy při malém rozměru obrázku, vpisovaný text jednoduše přeteče za obrázek. Pomocí funkcí ImageFontWidht a ImageFontHeight je možné zjistit velikost jednotlivých písmen v textu a tak například tento problém eliminovat, jak je to vyřešeno na ukázkovém příkladu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
//pouzity font - 5 $font = 5; //dlouhy retezec pro vykresleni $string = "long text, long text, long text, long text, long text."; //sirka obrazku $width = 300; //px //zjisti pocet znaku na jednom radku. $chars_on_line = floor( $width / ImageFontWidth( $font ) ); //zjisti pocet nutnych radku textu $lines = ceil( strlen( $string ) / $chars_on_line ); //vypocita vysku obrazku $height = imagefontheight( $font ) * $lines; //odeslání hlaviček pro PNG soubor Header('Content-type: image/png'); //vytvoření TrueCollor obrázku $image = ImageCreateTrueColor( $width, $height ); //Alokace bílé barva zadáním hodnot RGB $color = ImageColorAllocate($image, 255, 255, 255); //pocatecni znak v retezci $string_start = 0-$chars_on_line; for( $i = 0; $i < $height; $i+= ImageFontHeight($font) ){ //vypise prislusnou cast retezce ImageString( $image, $font, 1, $i, substr( $string, $string_start += $chars_on_line, $chars_on_line ), $color ); } //vyreslení obrázku PNG ImagePng( $image ); |
ImageLoadFont
Prozatím jsme byli při vypisování textu odkázáni pouze na fonty, které jsou implementovány přímo v GD knihovně. To samozřejmě nestačí a je nutnost si při výpisu přidat vlastní fonty, protože fonty implementované v knihovně jsou dosti omezené.
Gd knihovna tuto možnost nabízí pomocí funkce ImageLoadFont:
|
1 |
int imageloadfont ( string $file ) |
Jako vstupní parametr funkce je řetězec, který representuje cestu k fontu, který bude použit. Funkce vrací číselný identifikátor písma, který je větší než hodnota 5, což je maximální hodnota výchozích nastavených písem.
Bohužel knihovna umožňuje načítat pouze bitmapové fonty ve formátu GDF, čímž vzniká opět určité omezení, ale i tak je možné na internetu sehnat spousty pěkných písem.
Na ukázkovém příkladu je vidět, jak je možné vlastní písmo načíst a jednoduše jej používat:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//odeslání hlaviček pro PNG soubor Header('Content-type: image/png'); //nacteni vlastniho fontu $font = ImageLoadFont('almosnow.gdf'); //retezec pro vypsani $string = "HELLO WORLD"; //vypocet rozmeru obrazku $width = imagefontwidth( $font ) * strlen( $string ); $height = imagefontheight( $font ); //vytvoření TrueCollor obrázku $image = ImageCreateTrueColor( $width, $height ); //Alokace bílé barva zadáním hodnot RGB $color = ImageColorAllocate($image, 255, 255, 255); //vypsani textu vlastnim fontem ImageString( $image, $font, 0, 0, $string, $color ); //vyreslení obrázku PNG ImagePng( $image ); |
U načteného fontu je možné opět používat funkce ImageFontWidth a ImageFontHeight. Práce s fontem je stejná jako práce s výchozím písmem.
ImageTtfText
Prozatím jediným popsaným řešením, pro použití vlastních fontů, byla funkce ImageFontLoad, která dokáže načíst font a poté s ním pracovat. Ovšem tato funkce je dosti omezená, co do typu fontu, protože umožňuje používat pouze fonty typu gdf, které nejsou běžně moc používané.
Opět existuje samozřejmě funkce, která dokáže pracovat s klasickými TTF fonty, a touto funkcí je ImageTtfText.
|
1 2 3 |
array imagettftext ( resource $image , float $size , float $angle , int $x , int $y , int $color , string $fontfile , string $text ) |
Funkce kromě použití vlastních fontů disponuje i dalšími možnostmi, oproti obdobě ImageString a to hlavně natáčením textu pod určitým úhlem, což je patrné z platných parametrů:
- Image – resource obrázku
- Size – velikost písma v pixelech
- Angle – úhel sklonu písma
- X – x-ová souřadnice začátku textu, levá dolní
- Y – y-ová souřadnice začátku textu, levá dolní
- Color – alokovaná barva textu
- FontFile – soubor s písmem
- Text – řetězec textu pro vypsání
Na uvedeném příkladu je vidět, jak funkce pracuje. Pro vykreslení obrázku jsou použity dva různé fonty, pomocí nichž jsou vykresleny do obrázku dva různé řetězce:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//odeslání hlaviček pro PNG soubor Header('Content-type: image/png'); //vytvoření TrueCollor obrázku $image = ImageCreateTrueColor( 250, 120 ); //cesta k pouzivanemu fontu $font = 'font.ttf'; //cesta k pouzivanemu fontu2 $font2 = 'MTCORSVA.TTF'; //retezec pro vypsani $string = "HELLO WORLD"; //Alokace bílé barva zadáním hodnot RGB $color = ImageColorAllocate($image, 255, 255, 255); //vypsani textu vlastnim fontem ImageTtfText($image, 20, 0, 30, 50, $color, $font, $string ); //vypsani textu vlastnim fontem2 ImageTtfText($image, 20, 0, 30, 100, $color, $font2, $string ); //vyreslení obrázku PNG ImagePng( $image ); |
ImageTtfbbox
Poslední funkcí, kterou v souvislosti s výpisem textu pomocí GD knihovny uvedu, je ImageTtfBbox.
Pokud jste si všimli, v minulém příkladu, při použití funkce ImageTtfText, není používaný font načten před voláním funkce žádnou jinou funkcí. PHP a GD knihovna jej tedy až do použití vůbec nezná, čímž vzniká problém, že není možné použít klasické funkce pro zjištění rozměrů (rozměry nejdou zjistit i z důvodu, že TTF fonty a jejich jednotlivá písmena nemusí být vždy stejně vysoká a široká).
Pro zjištění rozměrů, potřebných pro vykreslení řetězce pomocí TTF fontu existuje funkce ImageTTFBbox:
|
1 2 |
array imagettfbbox ( float $size , float $angle , string $fontfile , string $text ) |
Funkce na základě vstupních parametrů vrací souřadnice prostoru, potřebného pro vykreslení řetězce při použitém fontu a velikosti:
- Size – velikost písma v pixelech
- Angle – úhel, pod kterým je text vypisován
- FontFile – soubor s používaným písmem
- Text – textový řetězec pro vykreslení
Jak je vidět, všechny parametry, které do funkce vstupují, jsou shodné s parametry funkce ImageTTfText, která text vypisuje.
Funkce vrací pole čtyř souřadnic, které representují celkové rozměry, potřebné pro vykreslení textu v zadaných podmínkách:
| Index pole | význam hodnoty |
|---|---|
| 0 | Levý dolní roh na ose x |
| 1 | Levý dolní roh na ose y |
| 2 | Pravý dolní roh na ose x |
| 3 | Pravý dolní roh na ose y |
| 4 | Pravý horní roh na ose x |
| 5 | Pravý horní roh na ose y |
| 6 | Levý horní roh na ose x |
| 7 | Levý horní roh na ose y |
Pomocí těchto rozměrů můžeme například velmi jednoduše zjistit potřebnou plochu pro vykreslení zadaného textu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//cesta k pouzivanemu fontu $font = 'font.ttf'; //velikost pisma $font_size = 20; //retezec pro vykresleni $string = 'Hello World'; //zjisteni potrebnych rozmeru pro vykresleni $size = imagettfbbox($font_size , 0, $font, $string); //zjisteni vysky vypsaneho textu $width = abs( $size[2] - $size[0] ); //zjisteni sirky vypsaneho textu $height = abs( $size[1] - $size[7] ); |
V proměnných Width a Height máme nyní Integer hodnoty, představující rozměry, které na plátně zabere text „Hello World“, vypisovaný písmem font.ttf, o velikosti 20 pixelů, pod úhlem 0 stupňů.
Pokud bychom vykreslili obrázek o těchto rozměrech a vepsali do něj náš text, zabral by text celou jeho velikost:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
//cesta k pouzivanemu fontu $font = 'font.ttf'; //velikost pisma $font_size = 20; //retezec pro vykresleni $string = 'Hello World'; //zjisteni potrebnych rozmeru pro vykresleni $size = imagettfbbox($font_size , 0, $font, $string); //zjisteni vysky vypsaneho textu $width = abs( $size[2] - $size[0] ); //zjisteni sirky vypsaneho textu $height = abs( $size[1] - $size[7] ); //odeslání hlaviček pro PNG soubor Header('Content-type: image/png'); $image = imagecreatetruecolor($width, $height ); //Alokace bílé barva zadáním hodnot RGB $color = ImageColorAllocate($image, 255, 255, 255); //vypsani textu vlastnim fontem ImageTtfText($image, 20, 0, 0, $height, $color, $font, $string ); //vyreslení obrázku PNG ImagePng( $image ); |
Závěrem:
To je z vykreslování textu pomocí GD knihovny všechno. Jak je vidět, knihovna nabízí pro vykreslování do obrázků opravdu velké množství funkcí a velkou podporu ze strany uživatele.
Na výběr je jak vykreslování řetězců, tak vykreslování znaků, výběr velikosti písma, nebo typu písma, ať už načtením pomocí ImageLoadFont, nebo použitím TTF písma pomocí ImageTTFText.