Image Resizing Made Easy cu PHP

V-ați dorit vreodată o metodă ușor de utilizat pentru redimensionarea imaginilor în PHP? Ei bine, asta e ceea ce sunt clasele PHP - piesele reutilizabile de funcționalitate pe care le numim pentru a face munca murdară din spatele scenei. Vom învăța cum să creați o clasă proprie, care să fie bine construită, precum și extensibilă. Redimensionarea ar trebui să fie ușoară. Ce usor? Ce zici de trei pași!

Scripturi de redimensionare a imaginilor premium

Înainte de a intra în procesul pas cu pas, să examinăm câteva opțiuni premium de la CodeCanyon. Există zeci de scripturi și plugin-uri de redimensionare a imaginilor pentru a alege între ele - aici este o privire rapidă asupra unora dintre ele.

1. Image Resizer și Thumbnail Creator

Aceasta este o simplă clasă PHP care redimensionează imaginile în zbor. Dacă utilizați orice server web cu funcție de PHP și aveți orice fel de vizualizator de imagini, acest script este ideal pentru dvs. Acesta păstrează întotdeauna raportul de aspect, astfel încât imaginea redimensionată își păstrează forma.

Image Resizer și Thumbnail Creator

2. anySize - Cache image resizer

anySize este un script usor, drop-in, complet automatizat, caching, make-you-coffee-and-serve-it-in-bed, care vă permite să solicitați și să generați imagini (jpg, gif sau png).

anySize - Cache image resizer

3. Redimensionarea imaginii Magento

Acest plugin Magento vă permite să setați lățimea și înălțimea maximă a imaginii care pot fi încărcate pentru imaginea de catalog. De asemenea, reduce dimensiunea fișierului din imaginea de catalog. Acesta vă va ajuta să reduceți spațiul de stocare a discului deoarece imaginile vor fi redimensionate și comprimate.

Magento Image Resize

4. Image Resizer și filigran

Această clasă PHP vă ajută să redimensionați orice fotografii și să faceți filigranul dvs. personal.

Image Resizer și Watermark Maker

5. RezImage - redimensionare ușoară a imaginilor în vrac

RezImage este un instrument simplu și flexibil de redimensionare a imaginilor în vrac, perfect pentru designerii web sau pentru proprietarii magazinelor online. Acest instrument vă permite să redimensionați un dosar întreg plin de imagini, indiferent de cât de multe sunt - încărcați doar dosarul cu imaginile, setați lățimea și înălțimea și nimic mai mult. Include unele presetări de rezoluție precum VGA, HD, QXGA, QSXGA, etc ... dar puteți seta și dvs..

RezImage - redimensionare ușoară a imaginii în bloc

Introducere

Pentru a vă oferi o scurtă privire la ceea ce încercăm să realizăm cu clasa noastră, clasa ar trebui să fie:

  • Ușor de folosit
  • Format independent. I.E., deschideți, redimensionați și salvați o serie de formate de imagini diferite.
  • Dimensionarea inteligentă - fără distorsiuni ale imaginii!

Notă: Acesta nu este un tutorial despre cum să creați clase și obiecte și, deși această abilitate ar ajuta, nu este necesară pentru a urma acest tutorial.

Sunt multe de acoperit - Să începem.


Etapa 1 Pregătirea

Vom începe ușor. În directorul de lucru creați două fișiere: unul numit index.php, celălalt resize-class.php


Pasul 2 Apelarea obiectului

Pentru a vă oferi o idee despre ceea ce încercăm să realizăm, vom începe prin a codifica apelurile pe care le vom folosi pentru a redimensiona imaginile. Deschideți fișierul index.php și adăugați următorul cod.

După cum puteți vedea, există o logică plăcută a ceea ce facem. Deschideți fișierul imagine, setăm dimensiunile pe care vrem să redimensionăm imaginea și tipul de redimensionare.
Apoi salvăm imaginea, alegând formatul de imagine dorit și calitatea imaginii. Salvați și închideți fișierul index.php.

 // *** Includerea clasei include ("resize-class.php"); // *** 1) Initializeaza / incarca imaginea $ resizeObj = redimensiona noua ('sample.jpg'); // 2) redimensionarea imaginii (opțiuni: exact, portret, peisaj, automat, decupare) $ resizeObj -> resizeImage (150, 100, "crop"); // 3) Salvați imaginea $ resizeObj -> saveImage ('sample-resized.gif', 100);

Din codul de mai sus puteți vedea că deschidem un fișier jpg, dar salvăm un gif. Amintiți-vă, este vorba despre flexibilitate.


Etapa 3 Clasa de schelet

Este programarea orientată pe obiecte (OOP), care face ca acest sentiment de ușurință să fie posibil. Gândiți-vă la o clasă ca un model; puteți încapsula datele - un alt termen de jargon care înseamnă doar ascunderea datelor. Putem reuși să reușim din nou această clasă fără a mai fi necesară rescrierea oricărui cod de redimensionare - trebuie doar să apelați metodele potrivite, așa cum am făcut la pasul doi. Odată ce modelul nostru a fost creat, vom crea instanțe ale acestui model, numite obiecte.

"Funcția de construcție, cunoscută ca constructor, este o metodă de clasă specială care devine apelată de clasă atunci când creați un obiect nou".

Să începem să creăm clasa noastră de redimensionare. Deschideți fișierul resize-class.php. Mai jos este o structură de schelet de clasă cu adevărat de bază pe care am numit-o "redimensiona". Rețineți linia de comentarii variabile de clasă; aceasta este dacă am începe să adăugăm variabilele noastre de clasă importante mai târziu.

Funcția de construcție, cunoscută ca constructor, este o metodă de clasă specială (termenul "metoda" este același ca și funcția, dar atunci când vorbim despre clase și obiecte, metoda de termen este adesea folosită) care devine apelată de clasă atunci când creați un obiect nou. Acest lucru face ca noi să facem o inițiere - pe care o vom face în pasul următor.

 Class resize // *** Variabila de clasă funcție publică __construct () 

Rețineți că este a dubla subliniază metoda construirii.


Pasul 4 Constructorul

Vom modifica metoda constructorului de mai sus. În primul rând, vom trece numele fișierului (și calea) imaginii noastre pentru a fi redimensionate. Vom numi această variabilă $ fileName.

Trebuie să deschideți fișierul trecut cu PHP (mai exact, Biblioteca PHP GD), astfel încât PHP să poată citi imaginea. Facem acest lucru cu metoda personalizată "openImage". Voi ajunge la modul în care această metodă
funcționează într-un moment, dar pentru moment, trebuie să salvăm rezultatul ca o variabilă de clasă. O variabilă de clasă este doar o variabilă - dar este specifică acelei clase. Rețineți comentariul variabil de clasă pe care l-am menționat anterior? Adăugați "imagine" ca variabilă privată introducând "privat $ image"; Prin setarea variabilei ca "privată", setați domeniul de aplicare al acelei variabile astfel încât acesta să poată fi accesat numai de către clasă. De acum înainte, putem face apel la imaginea noastră deschisă, cunoscută ca o resursă, pe care o vom face mai târziu când redimensionăm.

În timp ce suntem la ea, să stocăm înălțimea și lățimea imaginii. Am un sentiment că acestea vor fi utile mai târziu.

Ar trebui să aveți acum următoarele.

 Clasa redimensiona // *** Variabilele clase private $ image; lățime privată $; suma înălțimii private; funcția __construct ($ fileName) // *** Deschide fișierul $ this-> image = $ this-> openImage ($ fileName); // *** Obțineți lățimea și înălțimea $ this-> width = imagesx ($ this-> image); $ this-> height = imaginea ($ this-> image); 

Metodele imagesx și imaginile sunt construite în funcții care fac parte din biblioteca GD. Ele recuperează lățimea și înălțimea imaginii, respectiv.


Pasul 5 Deschiderea imaginii

În pasul anterior, se numește metoda personalizată openImage. În acest pas vom crea această metodă. Vrem ca scenariul să ne facă să gândim pentru noi, deci în funcție de tipul de fișier care este transmis, scriptul ar trebui să determine ce funcția Biblioteca GD solicită pentru a deschide imaginea. Acest lucru este ușor de atins prin compararea extensiei de fișiere cu o declarație de comutare.

Noi trecem în fișierul nostru vrem să redimensionăm și să returnăm acea resursă de fișiere.

 funcția privată openImage ($ file) // *** Obțineți extensia $ extension = strtolower (strrchr ($ file, '.')); comutator (extensie $) case '.jpg': caz '.jpeg': $ img = @imagecreatefromjpeg ($ file); pauză; cazul ".gif": $ img = @imagecreatefromgif ($ fișier); pauză; cazul ".png": $ img = @imagecreatefrompng (fișier $); pauză; implicit: $ img = false; pauză;  return $ img; 

Pasul 6 Cum se redimensionează

Aici se petrece dragostea. Acest pas este într-adevăr doar o explicație a ceea ce vom face - deci nu faceți temele aici. În următorul pas, vom crea o metodă publică pe care o vom apela pentru a efectua redimensionarea; așa că este logic să treceți în lățime și înălțime, precum și informații despre modul în care dorim să redimensionăm imaginea. Să vorbim despre asta pentru o clipă. Vor fi scenarii în care doriți să redimensionați o imagine la o dimensiune exactă. Bine, să includem asta. Dar vor exista și momente când trebuie să redimensionați sute de imagini și fiecare imagine are un raport de aspect diferit - imaginile portretului. Redimensionarea acestora la o dimensiune exactă va cauza distorsiuni grave. Dacă analizăm opțiunile noastre pentru a preveni denaturarea, putem:

  1. Redimensionați imaginea cât mai aproape de noile dimensiuni ale imaginii, păstrând în același timp raportul de aspect.
  2. Redimensionați imaginea cât se poate de aproape de noile dimensiuni ale imaginii noastre și recoltați restul.

Ambele opțiuni sunt viabile, în funcție de nevoile dvs..

Da. vom încerca să ne ocupăm de toate cele de mai sus. Pentru a revedea, vom oferi opțiuni pentru:

  1. Redimensionați cu lățimea exactă / înălțime. (Exactă)
  2. Redimensionați cu lățimea - lățimea exactă va fi setată, înălțimea va fi ajustată în funcție de raportul de aspect. (peisaj)
  3. Redimensionați în funcție de înălțime, cum ar fi Resize by Width, dar înălțimea va fi setată și lățimea ajustată dinamic. (portret)
  4. Determinarea automată a opțiunilor 2 și 3. Dacă faceți buclă printr-un dosar cu fotografii de dimensiuni diferite, permiteți scriptului să determine cum să se ocupe de acest lucru. (auto)
  5. Redimensionați, apoi recoltați. Acesta este preferatul meu. Dimensiunea exactă, fără denaturare. (a decupa)

Pasul 7 Redimensionarea. S-o facem!

Există două părți ale metodei redimensionării. Primul este obținerea lățimii și înălțimii optime pentru noua noastră imagine, prin crearea unor metode personalizate - și, bineînțeles, trecerea în opțiunea noastră de redimensionare așa cum este descris mai sus. Lățimea și înălțimea sunt returnate ca matrice și setate la variabilele lor respective. Simțiți-vă liber să "treceți ca referință" - dar nu sunt un mare fan al acestui lucru.

A doua parte este ceea ce efectuează redimensionarea reală. Pentru a păstra această dimensiune tutorial în jos, vă voi lăsa să citiți următoarele funcții GD:

  • imagecreatetruecolor
  • imagecopyresampled.

De asemenea, salvăm rezultatul metodei imagecreatetruecolor (o nouă imagine color reală) ca variabilă de clasă. Adăugați 'private $ imageResized;' cu celelalte variabile de clasă.

Redimensionarea este efectuată de un modul PHP cunoscut sub numele de Biblioteca GD. Multe dintre metodele pe care le folosim sunt furnizate de această bibliotecă.

 // *** Adăugați la variabilele de clasă private $ imageResized;
 ($ newWidth, $ newHeight, $ option = "auto") // *** Obțineți lățimea și înălțimea optimă - pe baza opțiunii $ optionArray = $ this-> getDimensions ($ newWidth, $ newHeight, strtolower opțiunea $)); $ optimalWidth = $ opțiuneArray ['optimalWidth']; $ optimalHeight = $ opțiuneaArray ['optimalHeight']; // *** Resample - a crea pânza de imagine de x, y dimensiune $ this-> imageResized = imagecreatetruecolor ($ optimalWidth, $ optimalHeight); imagecopyresampled ($ this-> imageResized, $ this-> imagine, 0, 0, 0, 0, $ optimalWidth, $ optimalHeight, $ this-> width, $ this-> height); // *** dacă opțiunea este "cultură", atunci cultura este prea mare dacă ($ option == 'crop') $ this-> crop ($ optimalWidth, $ optimalHeight, $ newWidth, $ newHeight); 

Pasul 8 Arborele de decizie

Cu cât lucrați mai mult acum, cu atât mai puțin trebuie să faceți atunci când redimensionați. Această metodă alege traseul pe care doriți să-l realizați, cu scopul de a obține lățimea optimă și înălțimea optimă pe baza opțiunii dvs. de redimensionare. Se va numi metoda potrivită, pe care o vom crea în pasul următor.

 funcția privată getDimensions ($ newWidth, $ newHeight, $ option) comutare (opțiunea $) case 'exact': $ optimalWidth = $ newWidth; $ optimalHeight = $ newHeight; pauză; caz "portret": $ optimalWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimalHeight = $ newHeight; pauză; cazul "peisaj": $ optimalWidth = $ newWidth; $ optimalHeight = $ acest-> getSizeByFixedWidth ($ newWidth); pauză; cazul 'auto': $ optionArray = $ this-> getSizeByAuto ($ newWidth, $ newHeight); $ optimalWidth = $ opțiuneArray ['optimalWidth']; $ optimalHeight = $ opțiuneaArray ['optimalHeight']; pauză; caz "cultură": $ optionArray = $ this-> getOptimalCrop ($ newWidth, $ newHeight); $ optimalWidth = $ opțiuneArray ['optimalWidth']; $ optimalHeight = $ opțiuneaArray ['optimalHeight']; pauză;  matrice returnare ('optimalWidth' => $ optimalWidth, 'optimalHeight' => $ optimalHeight); 

Pasul 9 Dimensiuni optime

Am discutat deja ce fac aceste patru metode. Ele sunt doar matematica de baza, intr-adevar, care calculeaza cea mai buna potrivire.

 funcția privată getSizeByFixedHeight ($ newHeight) $ ratio = $ this-> width / $ this-> height; $ newWidth = $ newHeight * $; returnează $ newWidth;  funcția privată getSizeByFixedWidth ($ newWidth) $ ratio = $ this-> height / $ this-> width; $ newHeight = $ newWidth * $; returnați $ newHeight;  funcția privată getSizeByAuto ($ newWidth, $ newHeight) if ($ this-> height < $this->lățime) // Imaginea care urmează a fi redimensionată este mai largă (peisaj) $ optimalWidth = $ newWidth; $ optimalHeight = $ acest-> getSizeByFixedWidth ($ newWidth);  elseif ($ this-> height> $ this-> width) // Imaginea care trebuie redimensionată este mai înaltă (portret) $ optimalWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimalHeight = $ newHeight;  else // *** Imaginea care urmează să fie redimensionată este un pătrat if ($ newHeight < $newWidth)  $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth ($ newWidth);  altfel dacă ($ newHeight> $ newWidth) $ optimalWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimalHeight = $ newHeight;  altfel // *** Sqaure fiind redimensionat la un $ square $ optimalWidth = $ newWidth; $ optimalHeight = $ newHeight;  matrice de returnare ('optimalWidth' => $ optimalWidth, 'optimalHeight' => $ optimalHeight);  funcția privată getOptimalCrop ($ newWidth, $ newHeight) $ heightRatio = $ this-> height / $ newHeight; $ widthRatio = $ această-> lățime / $ newWidth; dacă ($ heightRatio < $widthRatio)  $optimalRatio = $heightRatio;  else  $optimalRatio = $widthRatio;  $optimalHeight = $this->înălțime / $ optimalRatio; $ optimalWidth = $ această-> lățime / $ optimalRatio; matrice returnare ('optimalWidth' => $ optimalWidth, 'optimalHeight' => $ optimalHeight); 

Pasul 10 Recoltarea

Dacă ați optat pentru o recoltă - adică ați utilizat opțiunea de cultură, atunci aveți un pas mai mic. Vom decupa imaginea din
centru. Decuparea este un proces foarte asemănător cu redimensionarea, dar cu câțiva parametri de calibrare depășiți.

 ($ optimalWidth / $ newwidth, $ newHeight) // *** Find center - acesta va fi folosit pentru cultura $ cropStartX = ($ optimalWidth / 2) - ($ newWidth / 2); $ cropStartY = ($ optimalHeight / 2) - ($ newHeight / 2); $ crop = $ this-> imageResized; // imagedestroy ($ this-> imageResized); // *** Acum recoltați de la centru la dimensiunea exactă solicitată $ this-> imageResized = imagecreatetruecolor ($ newWidth, $ newHeight); ($ this-> imageResized, $ crop, 0, 0, $ cropStartX, $ cropStartY, $ newWidth, $ newHeight, $ newWidth, $ newHeight); 

Pasul 11 ​​Salvați imaginea

Noi ajungem acolo; aproape gata. Acum este momentul să salvați imaginea. Trecem în cale și calitatea imaginii ne-ar plăcea variind de la 0 la 100, 100 fiind cea mai bună și sunați la metoda potrivită. Câteva lucruri de remarcat despre calitatea imaginii: JPG utilizează o scară de la 0 la 100, 100 fiind cea mai bună. Imaginile GIF nu au o setare a calității imaginii. PNG fac, dar folosesc scara 0-9, 0 fiind cea mai buna. Acest lucru nu este bun, deoarece nu ne putem aștepta să ne amintim acest lucru de fiecare dată când vrem să salvăm o imagine. Facem un pic de magie pentru a standardiza totul.

 funcția publică saveImage ($ savePath, $ imageQuality = "100") // *** Obțineți extensia $ extension = strrchr ($ savePath, '.'); $ extension = strtolower (extensie $); comanda (extensie $) case '.jpg': case '.jpeg': if (imagetypes () & IMG_JPG) imagejpeg ($ this-> imageResized, $ savePath, $ imageQuality);  pauză; cazul ".gif": dacă (imagetypes () și IMG_GIF) imagegif ($ this-> imageResized, $ savePath);  pauză; caz '.png': // *** Calitatea scării de la 0-100 până la 0-9 $ scaleQuality = rotund (($ imageQuality / 100) * 9); // *** Invert setarea de calitate ca 0 este cel mai bun, nu 9 $ invertScaleQuality = 9 - $ scarăQuality; dacă (imagetypes () și IMG_PNG) imagepng ($ this-> imageResized, $ savePath, $ invertScaleQuality);  pauză; // ... etc implicit: // *** Nu este extensie - Nu se salvează. pauză;  imagedestroy ($ this-> imageResized); 

Acum este, de asemenea, un moment bun pentru a distruge resursa imaginii pentru a elibera ceva memorie. Dacă ați fi folosit acest lucru în producție, ar putea fi, de asemenea, o idee bună să capturați și să returnați rezultatul imaginii salvate.


Concluzie

Asta este, oameni buni. Vă mulțumim că ați urmat acest tutorial, sper că vi se pare util. Aș aprecia feedback-ul dvs., prin comentariile de mai jos.

Cod