Dynamiczne dodawanie tekstu do grafiki

  1. RkBlog
  2. PL
  3. Programowanie
  4. PHP
  5. Podstawy PHP
14 July 2008 Comments
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

Podstawy PHP, 14 July 2008

Comment article
Comment article RkBlog main page Search RSS Contact