Generare imagini cu PHP

Cand lucram cu imagini este similar cu fisiere sau CURL, functia imagecreate() returneaza un handler pe care ulterior il folosim cu functiile pentru imagini si folosim imagedestroy() pentru a elibera memoria. Vom nota handler-ul returnat de imagine cu $ih de la image handler.

Am redus crearea imaginilor cu php la 4 etape, un algoritm foarte simplu:

1. Stabilam lungimea(height) si latimea(width) a imaginii.
2. Stabilim textul sau efectele ce vor fi introduse in imagine, daca este cazul.
3. Stabilim culorile pentru background, text si efecte precum linii daca este cazul.
4. Stabilim modul in care va fi afisata imaginea, pune-ti intrebarea: „Salvez imaginea in fisier sau doar o afisez?”

In continuare doresc sa fac o scurta introducere, intr-o ordine usor de retinut, ale functiilor cu care vom lucra in exemplul din acest capitol si care sunt esentiale in lucrul cu imagini:

• resource imagecreate ( int $width , int $height )
  Functia cu care incepem lucrul cu GD, returneaza handler-ul de care avem nevoie pentru functiile GD. Parametrii reprezinta:

  • $width - latimea imaginii in pixeli
  • $height - lungimea imaginii in pixeli
• int imagecolorallocate ( resource $handler , int $rosu , int $verde , int $albastru )
  Cu aceasta functie alocam o culoare pe care o vom folosii apoi in imagine, cam aiurea asta cu alocarea culorilor dar ce sa facem...
  Cum sunteti obisnuiti de la fisiere si CURL primul parametru este handler-ul iar ultimii trei parametrii sunt codurile pentru culoare in format RGB(uite aici niste exemple de culori RGB). Parametrii:

  • $handler - handlerul returnat de functia imagecreate
  • $rosu - o valoare intre 0 si 255 privind intensitatea culorii
  • $verde - o valoare intre 0 si 255 privind intensitatea culorii
  • $albastru - o valoare intre 0 si 255 privind intensitatea culorii
• bool imagefill( resource $handler , int $x , int $y , int $culoare)
  Folosita pentru a umple imaginea cu o culoare.

  • $handler - handlerul returnat de functia imagecreate
  • $x - coordonatele x pentru punctul de start
  • $y - coordonatele y pentru punctul de start
  • $culoare - culoarea alocata si returnata de functia imagecolorallocate
• bool imagestring( resource $handler , int $font , int $x , int $y , string $text , int $culoare )
  Folosita pentru a introduce text in imagine.

  • $handler - handlerul returnat de functia imagecreate
  • $font - un numar de la 1 la 5, 1 reprezinta fontul cel mai mic iar 5 reprezinta fontul cel mai mare
  • $x - Distanta fata de marginea din stanga
  • $y - Distanta fata de marginea de sus
  • $text - textul ce va fi introdus, aveti grija sa nu fie mai lung decat imaginea
  • $culoare - culoarea alocata si returnata de functia imagecolorallocate
• bool imagepng( resource $handler [, string $nume_fisier [, int $calitate [, int $filtre ]]] )
  Folosit pentru a „exporta” imaginea in png, similara cu imagegif() si imagejpeg().

  • $handler - handlerul returnat de functia imagecreate
  • $nume_fisier - optional, path-ul unde se va fisierul, setati NULL doar in caz ca doriti sa specificati ceva la ultimii doi parametrii
  • $calitate - optional, reprezinta nivelul de compresie de la 0(nici o compresie) la 9
  • $filtre - pentru reducerea dimenisiunii fisierului, folositi una din constantele PNG_NO_FILTER sau PNG_ALL_FILTERS
• bool imagedestroy( resource $handler )
  Folosita pentru eliberarea resurselor ascoiate cu acea imagine reprezentata de $handler. Parametru:

  • $handler - handlerul returnat de functia imagecreate

Exemplu

Cred ca era si timpul, am dorit inainte sa ma asigur ca ai o scurta idee despre ce fac functiile elementare in lucrul cu imagini in PHP iar urmarind si comentariile din codul exemplului vei intelege exact despre ce este vorba. Am aplicat etapele explicate la inceputului capitolului in felul urmator:
1. Imaginea va avea 400 pixeli latime(width) si 70 pixeli lungime(height)
2. Textul de introdus il vom salva in variabila $text_in_imagine, ne-am asigurat ca nu este prea lung.
3. Vom folosii culoarea rosie pentru background si verde pentru text, deoarece sunt usor de retinut
4. Vom afisa imaginea direct din fisier transformand fisierul php intr-o imagine
<?php  
$width = 400; // latimea fisierului in pixeli
$height = 70; // lungimea fisierului in pixeli
$text_in_imagine = 'Acesta este un text introdus intr-o imagine.';

$ih = imagecreate($width, $height); // cream imaginea

# Alocam culoarea rosie pe care o vom folosii pentru background
$red = imagecolorallocate($ih, 255, 0, 0); 
# Alocam culoarea verde pe care o vom folosii pentru text
$green = imagecolorallocate($ih, 0, 255, 0); 

# Adaugam backgroundul de culoare rosie alocata in prealabil
imagefill($ih, 0, 0, $red); 
# Adaugam textul din variabila $text_in_imagine cu fontul numarul 4 si culoarea $green
imagestring($ih, 4, 20, (($height/2)-10), $text_in_imagine, $green);

# Setam ca continutul paginii este o imagine, un fisier binar
header('Content-type: image/png');
imagepng($ih); // afisam imaginea

imagedestroy($ih); // golim memoriea
?>
Output:

Vom folosii exemplul anterior, doar ca vom schimba ultima parte a algoritmului si anume cel cu modul de afisare a imaginii. Noi de data aceasta o vom salva intr-un fisier, putand astfel s-o accesam cu HTML din fisierul cu care am creat-o sau oricare alt fisier. Exemplul este identic, doar se schimba al doilea parametru de la functia imagepng.
Cod creare-imagine.php:

<?php  
$width = 400; // latimea fisierului in pixeli
$height = 70; // lungimea fisierului in pixeli
$text_in_imagine = 'Acesta este un text introdus intr-o imagine.';

$ih = imagecreate($width, $height); // cream imaginea

# Alocam culoarea rosie pe care o vom folosii pentru background
$red = imagecolorallocate($ih, 255, 0, 0); 
# Alocam culoarea verde pe care o vom folosii pentru text
$green = imagecolorallocate($ih, 0, 255, 0); 

# Adaugam backgroundul de culoarea rosie alocata in prealabil
imagefill($ih, 0, 0, $red); 
# Adaugam textul din variabila $text_in_imagine cu fontul numarul 4 si culoarea $green
imagestring($ih, 4, 20, (($height/2)-10), $text_in_imagine, $green);

imagepng($ih,'imagine-simpla-creata-cu-php.png'); // afisam imaginea

imagedestroy($ih); // golim memoriea
?>

Un exemplu cu fisierul creat il gasiti la adresa http://programam.ro//examples/imagine-simpla-creata-cu-php.png

Desi nu este o practica buna are avantajul ca e mai rapida si foarte simpla. O puteti folosii intr-un fisier php deja existent, putem afisa galerii intregi dintr-un singur fisier cu acest concept.
Algoritmul consta in:

1. Cream imaginea
2. Pornim ouput buffering
3. "Afisam" imaginea
4. Preluam continutul afisat in acest buffer
5. Inchidem output buffering fara sa afisam continutul

Despre ce este vorba in acest ouput buffering? El prelueaza continutul afisat de la pornirea lui cu ob_start() pana la inchiderea lui cu ob_end_clean()(fara afisare) sau ob_end_flush()(cu afisare), output bufferingul este folosit in general pentru a scapa de erorile cu „headers already sent” dar il putem folosii fara probleme si la imagini pentru preluarea imaginii intr-o variabila, pentru a prelua continutul capturat de output buffering se foloseste functia ob_get_contents(). Despre output buffering mai poti citii pe pagina oficiala in engleza.
Cod test.php:

<?php  
$width = 400; // latimea fisierului in pixeli
$height = 70; // lungimea fisierului in pixeli
$text_in_imagine = 'Text din prima imagine';

$ih = imagecreate($width, $height); // cream imaginea

# Alocam culoarea rosie pe care o vom folosii pentru background
$red = imagecolorallocate($ih, 255, 0, 0); 
# Alocam culoarea verde pe care o vom folosii pentru text
$green = imagecolorallocate($ih, 0, 255, 0); 

# Adaugam backgroundul cu culoarea rosie alocata in prealabil
imagefill($ih, 0, 0, $red); 
# Adaugam textul din variabila $text_in_imagine cu fontul numarul 4 si culoarea $green
imagestring($ih, 4, 20, (($height/2)-10), $text_in_imagine, $green);

ob_start(); // pornim output buffering-ul
imagepng($ih); // afisam imaginea
$image1 = ob_get_contents(); // preluam continutul din buffer
ob_end_clean(); // incheiem, nu afisam continutul

imagedestroy($ih); // golim memoriea



$text_in_imagine = 'Text din a doua imagine.';

$ih2 = imagecreate($width, $height); // o cream cu aceleasi dimensiuni
$albastru = imagecolorallocate($ih2, 0, 0, 255); 
$green = imagecolorallocate($ih2, 0, 255, 0); 

imagefill($ih2, 5555, 5555, $albastru); 
imagestring($ih2, 4, 20, (($height/2)-10), $text_in_imagine, $green);

ob_start();
imagejpeg($ih2); // de data aceasta cream o imagine jpeg
$image2 = ob_get_contents();
ob_end_clean();

imagedestroy($ih2);

# Observati cum sunt afisate imaginile, trebuie neaparat sa encodam output-ul in base64 si sa folosim inainte de el data:image/png;base64
# Desigur in loc de png puneti tipul imaginii care o aveti
echo '<img src="data:image/png;base64,'.base64_encode($image1).'"/><br/><br/>'; 
echo '<img src="data:image/jpeg;base64,'.base64_encode($image2).'"/>';


?>

Output:

Dupa cum vedeti noi am afisat doar doua imagini, voi puteti afisa oricate, acum nu a mai fost nevoie sa setam tipul fisierului cu header deoarece am folosit HTML-ul pentru a afisa imaginile.

Cu GD putem trasa si linii, mai jos o sa observi functiile pe care o sa le folosim in exemplul din acest capitol:

• bool imagesetthickness(resource $handler, int $pixeli_grosime)
  Seteaza grosimea liniei in pixeli. Parametrii:

  • $handler - handlerul returnat de functia imagecreate
  • $pixeli_grosime - grosimea in pixeli a liniei
• bool imageline(resource $handler, int $x1 , int $y1 , int $x2 , int $y2 , int $culoare)
  Trage o liniile dupa coordonatele preluate din parametrii. Dupa cum stiti din geometrie pentru a trage o linie avem nevoie de un punct de plecare si un punct de oprire, iar punctele au coordonate, punctul 1 este de coordonate $x1|$y1 iar punctul 2 de coordonate $x2|$y2. Parametrii:

  • $handler - handlerul returnat de functia imagecreate
  • $x1 - Distanta masurata in pixeli fata de marginea din stanga a imaginii. Punct de plecare.
  • $y1 - Distanta masurata in pixeli fata de marginea de sus a imaginii. Punct de plecare.
  • $x2 - Distanta masurata in pixeli fata de marginea din stanga a imaginii. Punct de oprire.
  • $y2 - Distanta masurata in pixeli fata de marginea de sus a imaginii. Punct de oprire.
  • $culoare - Culoarea obtinuta cu ajutorul functiei imagecolorallocate

Cod test.php:

<?php  
$width = 400; // latimea fisierului in pixeli
$height = 70; // lungimea fisierului in pixeli

$ih = imagecreate($width, $height); // cream imaginea

# Alocam culoarea rosie pe care o vom folosii pentru background
$red = imagecolorallocate($ih, 255, 0, 0); 
# Alocam culoarea galben pe care o vom folosii pentru linie
$galben = imagecolorallocate($ih, 255, 255, 0);

# Adaugam backgroundul de culoarea rosie alocata in prealabil
imagefill($ih, 0, 0, $red); 

# Setam grosimea liniei de 4 pixeli
imagesetthickness($ih, 4);
# Tragem linia cu coordonatele de start 50|35 spre coordonatele de oprire 350|35
imageline($ih, 50, 35, 350, 35, $galben);


header('Content-type: image/png');
imagepng($ih); // afisam imaginea

imagedestroy($ih); // golim memoriea
?>

Output:

Sper ca nu te enerveaza formele geometrice dar cand lucrezi cu imagini o sa dai intotdeauna de ele, in general in asta consta. De data aceasta avem o singura functie noua:

• bool imagerectangle(resource $handler , int $x1 , int $y1 , int $x2 , int $y2 , int $culoare)
  Creeaza un dreptunghi dupa coordonatele specificate. Dupa cum stiti, la fel ca la linii un dreptunghi are nevoie pentru a fi creat de doar doua puncte: unul de plecare si unul de oprire, iar punctele au coordonate. Partea buna este ca nici nu trebuie sa stiti geometrie pentru a va da seama de asta, doar jucati-va cu mouseul pe desktop si o sa observati ca aveti nevoie de doar doua puncte. Parametrii:

  • $handler - handlerul returnat de functia imagecreate
  • $x1 - Distanta masurata in pixeli fata de marginea din stanga a imaginii. Punct de plecare.
  • $y1 - Distanta masurata in pixeli fata de marginea de sus a imaginii. Punct de plecare.
  • $x2 - Distanta masurata in pixeli fata de marginea din stanga a imaginii. Punct de oprire.
  • $y2 - Distanta masurata in pixeli fata de marginea de sus a imaginii. Punct de oprire.
  • $culoare - Culoarea obtinuta cu ajutorul functiei imagecolorallocate

Cod test.php:

<?php  
$width = 400; // latimea fisierului in pixeli
$height = 70; // lungimea fisierului in pixeli

$ih = imagecreate($width, $height); // cream imaginea

# Alocam culoarea galben pe care o vom folosii pentru background
$galben = imagecolorallocate($ih, 255, 255, 0);
# Alocam culoarea black(negru) pe care o vom folosii pentru dreptunghi
$black = imagecolorallocate($ih, 0, 0, 0);

# Adaugam backgroundul cu culoarea neagra alocata in prealabil
imagefill($ih, 0, 0, $galben); 

# Desenam dreptungiul cu coordonatele de pornire 50|10 si coordonatele de oprire 350|60
imagerectangle($ih, 50, 10, 350, 60, $black);


header('Content-type: image/png');
imagepng($ih); // afisam imaginea

imagedestroy($ih); // golim memoriea
?>

Output:

Acum pentru a va da mai bine seama despre ce este vorba, am adaugat niste texte pe imagine pentru a arata legatura dintre puncte:

Acest exemplu va fi putin mai complicat. Functiile pe care le vom folosii in exemplul din acest capitol sunt:

• bool imagearc( resource $handler , int $cx , int $cy , int $width , int $height , int $start , int $end , int $culoare)
  Creeaza un cerc cu lungimea si latimea specificata, si cu centrul de coordonate $cx|$cy. Parametrii:

  • $handler - handlerul returnat de functia imagecreate
  • $cx - Coordonatele centrului. Distanta fata de marginea din stanga a imaginii.
  • $cy - Coordonatele centrului. Distanta fata de marginea de sus a imaginii.
  • $width - Latimea cercului masurata in pixeli.
  • $height - Lungimea cercului masurata in pixeli.
  • $start - De unde incepe cercul. Masurat in grade.
  • $end - Unde se termina cercul. Masurat in grade. Aici aveti nevoie de putina geometrie.
  • $culoare - Culoarea obtinuta cu ajutorul functiei imagecolorallocate
• bool imagefilledarc( resource $handler , int $cx , int $cy , int $width , int $height , int $start , int $end , int $culoare , int $style )
  Izbitor de similara cu functia imagearc, diferenta este ca aceasta pune si un background pentru cerc. Parametrii:

  • $handler - handlerul returnat de functia imagecreate
  • $cx - Coordonatele centrului. Distanta fata de marginea din stanga a imaginii.
  • $cy - Coordonatele centrului. Distanta fata de marginea de sus a imaginii.
  • $width - Latimea cercului masurata in pixeli.
  • $height - Lugimea cercului masurata in pixeli.
  • $start - De unde incepe cercul. Masurat in grade.
  • $end - Unde se termina cercul. Masurat in grade. Aici aveti nevoie de putina geometrie.
  • $culoare - Culoarea obtinuta cu ajutorul functiei imagecolorallocate. Acum nu o sa mai fie folosita doar pentru linia care delimiteaza cercul ci si pentru background.
  • $style - Ea are 4 optiuni, dar una singura este necesara sa fie memorata(celelalte sunt de umplutura) si anume constanta IMG_ARC_PIE pentru a umple cercul cu o culoare.

Cod:

<?php  
$width = 300; // latimea fisierului in pixeli
$height = 300; // lungimea fisierului in pixeli

$ih = imagecreate($width, $height); // cream imaginea

$galben = imagecolorallocate($ih, 255, 255, 0);
$red = imagecolorallocate($ih, 255, 0, 0);
$black = imagecolorallocate($ih, 0, 0, 0);
$slate_blue = imagecolorallocate($ih, 0, 127, 255);


# Adaugam backgroundul cu culoarea neagra alocata in prealabil
imagefill($ih, 0, 0, $galben); 

# Cerc cu centrul de coordonate 150|150, latime 280 si lungime 280.
# Capul.
imagearc($ih, 150, 150, 280, 280, 0, 360, $black);

# Ochii
imagefilledarc($ih, 90, 100, 66, 66, 0, 360, $slate_blue, IMG_ARC_PIE);
imagefilledarc($ih, 200, 100, 66, 66, 0, 360, $slate_blue, IMG_ARC_PIE);

# Gura
imagearc($ih, 150, 130, 250, 250, 40, 140, $red);

header('Content-type: image/png');
imagepng($ih); // afisam imaginea

imagedestroy($ih); // golim memoriea
?>

Output: