Cauta rapid aici ↑

Lucrul cu imaginii in PHP - Extensia GD

PHP ofera suport pentru manipularea imaginilor si face acest lucru foarte bine cu ajutorul extensiei GD. GD nu face parte din nucleul limbajului PHP si asa cum am spus aceasta este doar o extensie ce vine odata cu versiunea PHP 5.5 iar in versiunea PHP 5.6 au fost diferite probleme cu aceasta extensie (aspect ratio on image) si nu ne puteam baza in totalitate pe aceasta. Totusi in PHP 7 problemele cu aceasta extensie sau rezolvat si o putem folosi din plin.

Modalitatea prin care puteti afla daca interpretorul de PHP are extensia GD inclusa este prin folosirea functiei phpinfo functie prin care puteti afla si alte tipuri de informatii despre interpretorul PHP pe care il aveti instalat. Cel mai adesea veti gasi informatiile necesare despre extensia GD dupa ftp.

Extensia GD ofera peste 100 de functii cu care putem creea, manipula, adauga diferite elemente grafice pe imagini sau chiar converti o imagine dintr-un format jpeg in png, gif ori webp sau invers. Formatul webp este un format aparut in anul 2010 si ofera o compresie excelenta cu aceeasi calitate (un jpeg si un webp cu aceleasi dimensiuni pe latime si inatime vor avea dimensiunii ca marime radical diferite iar webp va avea aproximativ 10% din dimensiunea jpg-ului). La ora la care scriu aceste randuri acest format este suportat doar de catre browserele Chrome si Opera fie ca ruleaza pe desktop sau pe dispozitivele mobile.

Extensia GD este bazata pe libraria grafica cu acelasi nume ce a fost initial dezvoltata de Thomas Boutell iar in prezent este sustinuta si dezvoltata de echipa care dezvolta limbajul PHP. Un aspect foarte important despre aceasta extensie este ca aceasta este non distructiva si intotdeauna cand lucrezi cu o imagine, vei lucra cu o copie a acesteia si nu cu originalul. In momentul cand lucram cu una sau mai multe imagini nu putem vedea etapele prin care copia imaginii trece si din acest motiv vom vedea doar rezultatul final.

Etapele pentru manipularea imaginilor in PHP sunt urmatoarele.

  • cream o copie a imaginii
  • o manipulam
  • o salvam
  • stergem copia

Acesti pasi sunt foarte importanti pentru a duce la bun sfarsit munca pe una sau mai multe imaginii si intotdeauna vom urma in acest fel etapele manipulari imaginilor. De retinut ca pasul trei nu este obligatoriu si asta pentru ca putem sa il omitem si sa nu salvam copia imaginii dar putem sa o afisam in browser inainte de ultimul pas obligatoriu. Acest ultim pas este obigatoriu pentru ca acest proces implica multa memorie care la sfarsit trebuie eliberata.

Crearea copiei unei imaginii

Pentru fiecare tip de imagine, fie ca este vorba de jpg, png, gif sau webp exista cate o metoda la care numele ei se va termina cu mime type-ul imaginii. Aceste metode vor avea in comun restul numelui plus singurul parametru reprezentand calea catre imaginea cu mime type-ul corect.

  • imagecreatefromjpeg();
  • imagecreatefrompng();
  • imagecreatefromgif();
  • imagecreatefromwebp();
$copy_img = imagecreatefromjpeg('img/picture-test.jpg');

Manipularea copiei imaginii

Manipularea copiei imaginii se va face intotdeauna inainte de salvarea acesteia iar acest lucru devine evident cand vom incerca sa adaugam un element grafic (un dreptunghi ce contine un text) pe copia imaginii. Metodele ce creeaza si manipuleaza elementul grafic trebuie sa fie obligatoriu declarate inaintea metodei prin care vom salva copia imaginii.

Redimensionarea unei imagini

Redimensionarea unei imagini se va face cu ajutorul metodei imagescale, metoda ce va avea doua argumente. Primul va fi reprezentat de variabila unde am stocat copia imaginii iar al doilea va fi reprezentat de o valoare numerica ce reprezinta noua latime a imaginii.

    	$copy_img = imagecreatefromjpeg('img/picture-test.jpg');
        $new_width = imagescale($copy_img, 500);
    

Aflarea mime type-ului imaginii

O alta metoda din extensia GD este reprezentata de getimagesize si aceasta va avea ca singur parametru calea relativa catre imaginiea tinta. Aceasta metoda va returna un array asociativ cu mai multe informatii despre imaginea tinta. Aceste informatii reprezinta latimea si inaltimea imaginii in valori numerice, apoi o constanta sub forma valorii numerice 2 ce reprezinta mime type-ul imaginii in format numeric (2 = image/jpeg), apoi din nou latimea si inaltimea imaginii insa in format string, apoi vom vedea cel mai adesea valoarea 8 reprezentand numarul de biti pe culoare, apoi o alta valoare numerica ce cel mai adesea va reprezenta numarul de culorii (3 = rgb, 4 = CMYK) si la sfarsit vom avea mime type-ul imaginii in format string.

		$info_img = getimagesize('img/picture-test.jpg');
		print_r($info_img);
		// Array ( [0] => 500 [1] => 375 [2] => 2 [3] => width="500" height="375" [bits] => 8 [channels] => 3 [mime] => image/jpeg )
	

Metodele imagesx si imagesy

Aceste metode sunt foarte utile daca vrem sa aflam doar latimea si inaltimea copiei imaginii ce urmeaza ca mai apoi sa fie manipulata, in special cand vrem sa adaugam un element grafic intr-o anumita parte a imaginii. Aceste metode vor avea ca singur parametru obligatoriu doar variabila unde am creat copia imaginii, in caz contrar o eroare va fi afisata.

Adaugarea unui element grafic pe copia imaginii

Adaugarea unui element grafic, sa zicem un dreptunghi cu o culoare pe fundal si care are un text in el se va putea face in etapa in care manipulam copia imaginii. Etapele prin care vom trece pentru a creea dreptunghiul sunt urmatoarele.

  • cream dreptunghiul setand latimea si inaltimea acestuia
  • adaugam culoarea de fundal
  • adaugam textul in interiorul acestuia

Pentru a realiza acesti pasi va trebui sa ne folosim de cateva metode iar prima pe care o vom folosi va face referire la primul pas. Aceasta metoda este imagecreatetruecolor si care va avea doi parametri reprezentand dreptunghiul pe latime si inaltime.

$mark = imagecreatetruecolor(200, 100);

Urmatorul pas este sa adaugam culoarea de fundal. Vom putea realiza acest lucru cu ajutorul metodei imagefilledrectangle care va avea sase parametri explicati in urmatoarea lista.

  • variabila ce contine elementul grafic creat cu ajutorul metodei imagecreatetruecolor
  • valorile pe axa X de unde culoarea sa inceapa referitor cu coltul din stanga sus al dreptunghiului ( cel mai adesea vom avea valoarea zero )
  • valorile pe axa Y de unde culoarea sa inceapa referitor cu coltul din stanga sus al dreptunghiului ( cel mai adesea vom avea valoarea zero )
  • valoarea pe axa X pana unde vrem ca respectiva culoare sa se termine in dreptunghi (cel mai adesea vom avea aceleasi valori cu latimea dreptunghiului)
  • valoarea pe axa Y pana unde vrem ca respectiva culoare sa se termine in dreptunghi (cel mai adesea vom avea aceleasi valori cu inaltimea dreptunghiului)
  • valoarea in format hexadecimal a culorii, aceasta trebuie sa aiba inaintea acestei valori cifra zero si litera x
    	$mark = imagecreatetruecolor(200, 100);
        imagefilledrectangle($mark, 0, 0, 200, 100, 0x000000);
    

In cele din urma si pasul prin care vom adauga textul in acest dreptunghi. Acest lucru se va realiza cu ajutorul metodei imagestring, metoda ce va avea sase parametri explicati si acestia in urmatoarea lista.

  • variabila ce contine elementul grafic creat cu ajutorul metodei imagecreatetruecolor
  • dimensiunea textului reprezentand o valoare cuprinsa intre 1 si 5
  • valorile pe axa X fata de coltul din stanga sus al dreptunghiului si din care textul sa inceapa
  • valorile pe axa Y fata de coltul din stanga sus al dreptunghiului si din care textul sa inceapa
  • valoarea string ce reprezinta textul ce urmeaza a fi adaugat
  • valoarea in format hexadecimal a culorii textului, aceasta trebuie sa aiba inaintea acestei valori cifra zero si litera x
		$mark = imagecreatetruecolor(200, 100);
		imagefilledrectangle($mark, 0, 0, 200, 100, 0x000000);
		imagestring($mark, 5, 10, 20, 'Some text', 0xffffff);
	

In cele din urma va trebui sa adaugam elementul grafic pe imagine. Vom realiza asta cu ajutorul metodei imagecopymerge, metoda ce va avea noua parametri obligatorii si care sunt explicati in lista urmatoare.

  • variabila ce contine copia imaginii
  • variabila ce contine elementul grafic (dreptunghiul) ce urmeaza a fi adaugat pe copia imaginii
  • variabila ce contine valoarea numerica pe axa X prin care vom alinia elementul grafic fata de coltul din stanga sus al imaginii copiate
  • variabila ce contine valoarea numerica pe axa Y prin care vom alinia elementul grafic fata de coltul din stanga sus al imaginii copiate
  • variabila ce contine valoarea numerica pe axa X fata de punctul (locul) prin care am stabilit valorile anterioare si prin care vom putea alinia din nou elementul grafic ( de cele mai multe ori vom avea aici valoarea zero )
  • variabila ce contine valoarea numerica pe axa Y fata de punctul (locul) prin care am stabilit valorile anterioare si prin care vom putea alinia din nou elementul grafic ( de cele mai multe ori vom avea aici valoarea zero )
  • variabila ce contine latimea elementului grafic
  • variabila ce contine inaltimea elementului grafic
  • variabila ce contine valoarea numerica ce va face referire la opacitatea culori de fundal a elementului grafic, aceasta poate fi orice valoare numerica cuprinsa intre 0 si 100
imagecopymerge($copy_img, $mark, $copy_imgX, $copy_imgY, $markX, $markY, $markW, $markH, $opacity);

Salvarea copiei imaginii

Salvarea copiei imaginii manipulate se face cu ajutorul metodelor ce urmeaza aproape acelasi tipar ca in cazul creari copiei acesteia. Fiecare nume de metoda se va termina cu mime type-ul imaginii. Aceste metode vor avea insa minim un parametru si maxim patru iar fiecare este reprezentat mai jos. Primul parametru va fi intotdeauna obligatoriu.

  • imagejpeg($var_image_copy_name,$path_to_dir_plus_image_name_and_new_extension, $quality_number_1_to_100);
  • imagepng($var_image_copy_name, $path_to_dir_plus_image_name_and_new_extension, $quality_number_1_to_100, $filters);
  • imagegif($var_image_copy_name, $path_to_dir_plus_image_name_and_new_extension, $quality_number_1_to_100);
imagejpeg($copy_img, 'new-img/new-test-img.jpg', 100); // la parametrul trei valoarea default este 75

Stergerea copiei imaginii

Stergerea copiei imaginii se va face intotdeauna la finalul script-ului. Acest lucru se va realiza cu ajutorul metodei imagedestroy, metoda ce va avea un singur parametru iar acesta este binenteles variabila ce contine copia imaginii.

imagedestroy($copy_img);

Un exemplu

In acest exemplu va arat cum puteti manipula doar imaginile jpeg si sa le adaugati mai apoi in directorul jpg. Voi va trebui sa ajustati calea catre directoare si sa adaugati acest script in directorul parinte.

		$imgs_dir = 'img';
		$all_names = scandir($imgs_dir);
	
		for($i = 2; $i < count($all_names);$i++){
			$path = $imgs_dir.'/'.$all_names[$i];
			$mime = getimagesize($path);
			$w = 500;
			$rectangleX = 100;
			$rectangleY = 17;
			if($mime['mime'] == 'image/jpeg'){
				// create copy image
				$image = imagecreatefromjpeg($path);
				// from now we work with scaled image
				$scaled = imagescale($image, $w);
				// create rectangle
				$rectangle = imagecreatetruecolor($rectangleX, $rectangleY);
				// add rectangle background
				imagefilledrectangle($scaled, 0, 0, $rectangleX, $rectangleY, 0x000000);
				// add rectangle text
				imagestring($scaled, 5, 10, 1, 'PHP - GD', 0xffffff);
				// add rectangle on image copied
				imagecopymerge($scaled, $rectangle, 0, 0, 150, 100, $rectangleX, $rectangleY, 3);
				// save copyed image
				imagejpeg($scaled, 'new-img/jpg/'.$i.'.jpg');
				// destroy all two copyed image
				imagedestroy($image);
				imagedestroy($scaled);
				echo '<img src="new-img/jpg/'.$i.'.jpg" alt="" />';
			}
		}