RkBlog

Hardware, programming and astronomy tutorials and reviews.

Dynamiczne dodawanie tekstu do grafiki

Wykorzystanie biblioteki GD do nanoszenia dowolnego tekstu na plikach graficznych z wykorzystaniem czcionek TTF

PHP oferuje nam poprzez m.in. biblioteki GD narzędzia do edycji plików graficznych. Możemy rysować proste wzory, tekst czy edytować same grafiki: robić miniaturki, nakładać grafiki na siebie i wiele więcej. By poniżej opisane skrypty działały musimy mieć zainstalowaną biliotekę GD. Zazwyczaj darmowe serwery czy niektóre prostsze serwery na komputer nie mają jej. W tym drugim przypadku radzę stosować XAMPPa. Ten artykuł poświęcony jest umieszczaniu tekstu na grafice.

Dodawanie tekstu

Teraz zajmiemy się nanoszeniem tekstu na grafiki. Oto przykładowy skrypt:
<?php

// Otwieramy plik graficzny
$rysunek = ImageCreateFromJpeg("banner.jpg");

// Definicje kolorów jako składowe RGB
$bialy = ImageColorAllocate($rysunek, 255, 255, 255);
$nieb = ImageColorAllocate($rysunek, 0, 255, 255);

// Lokacja łańcucha i jego wartość
ImageString($rysunek, 15, 50, 10, "tekst1", $bialy);
ImageString($rysunek, 5, 180, 20, "tekst2", $nieb);

// Stworzenie wynikowej grafiki
header("Content-type: image/jpeg");
ImageJpeg($rysunek);
Skrypt ten otwiera istniejący plik graficzny (plik jpg):
1
Następnie definiujemy używane kolory jako składowe RGB - Czerwonego, Zielonego i Niebieskiego. Przykładowo czarny: (0,0,0), czerwony (255,0,0), zielony (0,255,0), niebieski (0,0,255). W przykładzie mamy jasny niebieski - zmieszany niebieski z zielonym. Każda liczba może przyjmować wartości od 0 do 255. Kolejnym etapem jest naniesienie tekstu na grafikę. ImageString to funkcja wykonująca tą czynność.
<?php
ImageString($rysunek, X, Y, Z, "lancuch", $kolor);
$rysunek to używane we wszystkich wywoływanych po kolei funkcjach identyfikator otwartego pliku. X - rozmiat czcionki (wartości od 1 do ok. 15, dalej czcionka nie powiększa się). Y - Odległość od lewego boku, Z - odległość od górnego bloku. Łańcuch to tekst jaki chcemy wstawić. Kod HTML nie będzie interpretowany. Ostatnim parametrem jest kolor tekstu.
Gdy już nanieśliśmy wszystkie teksty wysyłamy nagłówek (header) i wyświetlamy efekt końcowy za pomocą ImageJpeg. Powyższy przykład dotyczy plików jpg i jpeg. Dla PNG mielibyśmy ImageCreateFromPng, header("Content-type: image/png") i ImagePng($rysunek). W identyczny sposób dla GIFa lecz niektóre wersje GD nie mają wsparcie dla gifów (raczej na taką nie trafimy, ale warto pamiętać o tym). Efekt końcowy:
2

Zaawansowane dodawanie tekstu

Zaprezentowany skrypt nie daje nam możliwości określenia czcionki czy nachylenia tekstu. GD oferuje również bardziej zaawansowane funkcje umożliwiające wybór czcionki z pliku TIF. Oto przykład:
<?php

$rysunek = ImageCreateFromJpeg("banner.jpg");

$bialy = ImageColorAllocate($rysunek, 255, 255, 255);
$nieb = ImageColorAllocate($rysunek, 0, 255, 255);

ImageTTFText($rysunek, 16, 5, 12, 30, $bialy, 'rksig/fonts/kirstybi.ttf', 'Test czcionki');
ImageTTFText($rysunek, 20, 0, 170, 40, $bialy, 'rksig/fonts/Nokian.ttf', 'Matrix');

header("Content-type: image/jpeg");
ImageJpeg($rysunek);
Zamiast ImageString używamy funkcję ImageTTFText
<?php
ImageTTFText($rysunek, X, Y, Z, Q, $kolor, 'link/do/pliku TTF', 'Łańcuch');
X - rozmiar czcionki, Y - kąt nachylenia tekstu, Z - odległość od lewego boku, Q - odległość od górnego boku. Pliki czcionek możemy np. pobrać z netu. Umieszczamy je wraz ze skryptem więc nie ma tutaj ograniczeń. Oto wynik:
3


Pobieranie danych o rysunku

PHP posiada natywną funkcję pobierającą dane o rysunku (nie jest wymagane GD). Oto przykład:
<?php

$info = GetImageSize("banner.jpg");
echo '<pre>';
print_r($info);
echo '</pre>';
Funkcja GetImageSize zwraca tablicę zawierającą dane o pliku graficznym. Dla powyższego:
<?php

Array
(
    [0] => 400
    [1] => 50
    [2] => 2
    [3] => width="400" height="50"
    [bits] => 8
    [channels] => 3
    [mime] => image/jpeg
)
RkBlog

14 July 2008;

Comment article