Ridimensionamento delle immagini reso facile con PHP

Hai mai desiderato un metodo universale per ridimensionare le tue immagini in PHP? Bene, questo è ciò che le classi PHP sono per le funzionalità riutilizzabili che chiamiamo a fare il lavoro sporco dietro le quinte. Impareremo come creare la nostra classe che sarà ben costruita, oltre che espandibile. Il ridimensionamento dovrebbe essere facile. Com'è facile? Che ne dici di tre passi!

Script di ridimensionamento delle immagini Premium

Prima di entrare nel processo passo-passo, esaminiamo alcune opzioni premium di CodeCanyon. Ci sono dozzine di script per ridimensionare le immagini e plug-in tra cui scegliere: ecco alcuni esempi.

1. Image Resizer e Thumbnail Creator

Questa è una semplice classe PHP che ridimensiona le immagini al volo. Se si utilizza un server Web abilitato per PHP e si dispone di un qualsiasi tipo di visualizzatore di immagini, questo script è l'ideale per te. Mantiene sempre le proporzioni, quindi l'immagine ridimensionata mantiene la sua forma.

Image Resizer e Thumbnail Creator

2. anySize - Caching Image Resizer

anySize è uno script leggero, drop-in, completamente automatizzato, basato su cache, make-you-coffee-and-serve-in-letto che ti consente di richiedere e generare immagini (jpg, gif o png) di qualsiasi dimensione.

anySize - Caching image resizer

3. Ridimensiona immagine Magento

Questo plugin Magento consente di impostare la larghezza e l'altezza massima dell'immagine che possono essere caricate per l'immagine del catalogo. Riduce anche la dimensione del file dell'immagine del catalogo. Ti aiuterà a ridurre l'utilizzo dello spazio su disco poiché le immagini verranno ridimensionate e compresse.

Ridimensionamento immagine Magento

4. Image Resizer e Watermark Maker

Questa classe PHP ti aiuta a ridimensionare qualsiasi foto e creare il tuo filigrana personale.

Image Resizer e Watermark Maker

5. RezImage - Ridimensionamento facile dell'immagine in blocco

RezImage è uno strumento per ridimensionare le immagini bulk semplice e flessibile, perfetto per i web designer o i proprietari di negozi online. Questo strumento ti permette di ridimensionare un'intera cartella piena di immagini, non importa quante ce ne siano: basta caricare la cartella con le immagini, impostare la larghezza e l'altezza e nulla più. Include alcuni preset di risoluzione come VGA, HD, QXGA, QSXGA, ecc ... ma puoi anche impostarne uno tuo.

RezImage - Easy Bulk Image Resizing

introduzione

Per darti una rapida occhiata a ciò che stiamo cercando di ottenere con la nostra classe, la classe dovrebbe essere:

  • Facile da usare
  • Formato indipendente. I.E., aprire, ridimensionare e salvare un numero di formati di immagini diversi.
  • Dimensionamento intelligente - Nessuna distorsione dell'immagine!

Nota: questo non è un tutorial su come creare classi e oggetti, e anche se questa abilità sarebbe di aiuto, non è necessario per seguire questo tutorial.

C'è molto da coprire - Cominciamo.


Fase 1 Preparazione

Iniziamo facile. Nella tua directory di lavoro crea due file: uno chiamato index.php, l'altro resize-class.php


Passaggio 2 Chiamare l'oggetto

Per darti un'idea di ciò che stiamo cercando di ottenere, inizieremo a codificare le chiamate che useremo per ridimensionare le immagini. Apri il tuo file index.php e aggiungi il seguente codice.

Come puoi vedere, c'è una buona logica per quello che stiamo facendo. Apriamo il file immagine, impostiamo le dimensioni a cui vogliamo ridimensionare l'immagine e il tipo di ridimensionamento.
Quindi salviamo l'immagine, scegliendo il formato dell'immagine che vogliamo e la qualità dell'immagine. Salva e chiudi il tuo file index.php.

 // *** Include la classe include ("resize-class.php"); // *** 1) Inizializza / carica l'immagine $ resizeObj = new resize ('sample.jpg'); // *** 2) Ridimensiona immagine (opzioni: esatto, verticale, orizzontale, auto, ritaglio) $ resizeObj -> resizeImage (150, 100, 'ritaglio'); // *** 3) Salva immagine $ resizeObj -> saveImage ('sample-resized.gif', 100);

Dal codice sopra puoi vedere che stiamo aprendo un file jpg ma salvando una gif. Ricorda, è tutto sulla flessibilità.


Step 3 Class Skeleton

È la programmazione orientata agli oggetti (OOP) che rende possibile questo senso di facilità. Pensa a una classe come un modello; puoi incapsulare i dati - un altro termine gergale che in realtà significa solo nascondere i dati. Possiamo quindi riutilizzare questa classe più e più volte senza la necessità di riscrivere alcun codice di ridimensionamento: è sufficiente chiamare i metodi appropriati proprio come abbiamo fatto nel passaggio due. Una volta che il nostro schema è stato creato, creiamo istanze di questo modello, chiamate oggetti.

"La funzione construct, conosciuta come costruttore, è un metodo di classe speciale che viene chiamato dalla classe quando si crea un nuovo oggetto."

Iniziamo a creare la nostra classe di ridimensionamento. Apri il tuo file resize-class.php. Di seguito è una struttura scheletro di classe davvero semplice che ho chiamato 'resize'. Nota la riga di commento delle variabili di classe; questo è dove inizieremo ad aggiungere le nostre importanti variabili di classe in seguito.

La funzione construct, conosciuta come costruttore, è un metodo di classe speciale (il termine "metodo" è lo stesso della funzione, tuttavia, quando si parla di classi e oggetti viene spesso utilizzato il termine metodo) che viene chiamato dalla classe quando si crea un nuovo oggetto. Questo ci rende adatti all'inizializzazione, cosa che faremo nel passaggio successivo.

 Class resize // *** Variabili di classe public function __construct () 

Nota che è un Doppio sottolineatura per il metodo costrutto.


Step 4 The Constructor

Stiamo andando a modificare il metodo di costruzione sopra. Innanzitutto, passeremo il nome file (e il percorso) della nostra immagine da ridimensionare. Chiameremo questa variabile $ fileName.

Abbiamo bisogno di aprire il file passato con PHP (più specificamente la libreria GD di PHP) in modo che PHP possa leggere l'immagine. Lo stiamo facendo con il metodo personalizzato "openImage". Vedrò come questo metodo
funziona in un momento, ma per ora, abbiamo bisogno di salvare il risultato come una variabile di classe. Una variabile di classe è solo una variabile, ma è specifica per quella classe. Ricorda il commento variabile di classe che ho menzionato in precedenza? Aggiungi 'immagine' come variabile privata digitando 'private $ image;'. Impostando la variabile come "Privata", si imposta l'ambito di tale variabile in modo che possa essere accessibile solo dalla classe. D'ora in poi possiamo fare una chiamata alla nostra immagine aperta, conosciuta come una risorsa, che faremo più tardi quando ridimensioneremo.

Mentre ci siamo, memorizziamo l'altezza e la larghezza dell'immagine. Ho la sensazione che questi saranno utili in seguito.

Ora dovresti avere il seguente.

 Class resize // *** Variabili di classe private $ image; $ larghezza privata; altezza $ privata; function __construct ($ fileName) // *** Apri il file $ this-> image = $ this-> openImage ($ fileName); // *** Ottieni larghezza e altezza $ this-> width = imagesx ($ this-> image); $ this-> height = imagesy ($ this-> image); 

Metodi imagesx e imagesy sono costruiti in funzioni che fanno parte della libreria GD. Recuperano rispettivamente la larghezza e l'altezza dell'immagine.


Passaggio 5 Aprire l'immagine

Nel passaggio precedente, chiamiamo il metodo personalizzato openImage. In questo passo creeremo questo metodo. Vogliamo che lo script ci pensi, quindi a seconda di quale tipo di file è passato, lo script dovrebbe determinare quale funzione GD Library chiama per aprire l'immagine. Ciò si ottiene facilmente confrontando l'estensione dei file con un'istruzione switch.

Passiamo nel nostro file che vogliamo ridimensionare e restituire quella risorsa di file.

 funzione privata openImage ($ file) // *** Ottieni estensione $ extension = strtolower (strrchr ($ file, '.')); switch ($ extension) case '.jpg': case '.jpeg': $ img = @imagecreatefromjpeg ($ file); rompere; case '.gif': $ img = @imagecreatefromgif ($ file); rompere; case '.png': $ img = @imagecreatefrompng ($ file); rompere; default: $ img = false; rompere;  return $ img; 

Passaggio 6 Come ridimensionare

Questo è dove l'amore accade. Questo passaggio è in realtà solo una spiegazione di ciò che faremo, quindi niente compiti a casa qui. Nel prossimo passaggio, creeremo un metodo pubblico che chiameremo per eseguire il ridimensionamento; quindi ha senso passare la larghezza e l'altezza, così come le informazioni su come vogliamo ridimensionare l'immagine. Parliamo di questo per un momento. Ci saranno scenari in cui vorresti ridimensionare un'immagine a una dimensione esatta. Ottimo, includiamolo. Ma ci saranno anche momenti in cui devi ridimensionare centinaia di immagini e ogni immagine ha un diverso rapporto di aspetto - pensa le immagini ritratti. Ridimensionandoli a una dimensione esatta causerà una distorsione grave. Se diamo un'occhiata alle nostre opzioni per prevenire la distorsione possiamo:

  1. Ridimensiona l'immagine il più vicino possibile alle nuove dimensioni dell'immagine, pur mantenendo le proporzioni.
  2. Ridimensiona l'immagine il più vicino possibile alle nuove dimensioni dell'immagine e ritaglia il resto.

Entrambe le opzioni sono valide, a seconda delle esigenze.

Sì. cercheremo di gestire tutto quanto sopra. Per ricapitolare, forniremo opzioni per:

  1. Ridimensiona per larghezza / altezza esatta. (Esatto)
  2. Ridimensiona in base alla larghezza: verrà impostata la larghezza esatta, l'altezza verrà regolata in base al rapporto aspetto. (paesaggio)
  3. Ridimensiona in base all'altezza, ad esempio Ridimensiona per larghezza, ma l'altezza viene impostata e la larghezza viene regolata in modo dinamico. (ritratto)
  4. Determinazione automatica delle opzioni 2 e 3. Se si esegue il ciclo di una cartella con foto di dimensioni diverse, lasciare che lo script determini come gestirlo. (auto)
  5. Ridimensiona, quindi ritaglia. Questo è il mio preferito Dimensioni esatte, nessuna distorsione. (Crop)

Passaggio 7 Ridimensionamento. Facciamolo!

Ci sono due parti per il metodo di ridimensionamento. Il primo è ottenere la larghezza e l'altezza ottimali per la nostra nuova immagine creando alcuni metodi personalizzati e, naturalmente, passando la nostra "opzione" di ridimensionamento come descritto sopra. La larghezza e l'altezza vengono restituite come array e impostate sulle rispettive variabili. Sentiti libero di "passare come riferimento", ma non ne sono un grande fan.

La seconda parte è ciò che esegue il ridimensionamento effettivo. Per mantenere questa dimensione del tutorial, ti consentirò di leggere le seguenti funzioni GD:

  • imagecreatetruecolor
  • imagecopyresampled.

Salviamo anche l'output del metodo imagecreatetruecolor (una nuova immagine a colori veri) come variabile di classe. Aggiungi 'private $ imageResized;' con le altre variabili di classe.

Il ridimensionamento viene eseguito da un modulo PHP noto come GD Library. Molti dei metodi che stiamo utilizzando sono forniti da questa libreria.

 // *** Aggiungi a variabili di classe private $ imageResized;
 funzione pubblica resizeImage ($ newWidth, $ newHeight, $ option = "auto") // *** Ottieni larghezza e altezza ottimali - basato su $ option $ optionArray = $ this-> getDimensions ($ newWidth, $ newHeight, strtolower ( $ opzione)); $ optimalWidth = $ optionArray ['optimalWidth']; $ optimalHeight = $ optionArray ['optimalHeight']; // *** Ricampionamento: crea un'area immagine di x, dimensione y $ this-> imageResized = imagecreatetruecolor ($ optimalWidth, $ optimalHeight); imagecopyresampled ($ this-> imageResized, $ this-> image, 0, 0, 0, 0, $ optimalWidth, $ optimalHeight, $ this-> width, $ this-> height); // *** se l'opzione è 'ritaglio', quindi ritaglia anche se ($ opzione == 'ritaglia') $ this-> ritaglia ($ optimalWidth, $ optimalHeight, $ newWidth, $ newHeight); 

Passaggio 8 L'albero delle decisioni

Più lavoro fai ora, meno devi fare quando ridimensioni. Questo metodo sceglie la strada da percorrere, con l'obiettivo di ottenere la larghezza e l'altezza di ridimensionamento ottimali in base all'opzione di ridimensionamento. Chiamerà il metodo appropriato, di cui creeremo il passaggio successivo.

 funzione privata getDimensions ($ newWidth, $ newHeight, $ option) switch ($ option) case 'exact': $ optimalWidth = $ newWidth; $ optimalHeight = $ newHeight; rompere; caso 'portrait': $ optimalWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimalHeight = $ newHeight; rompere; case 'landscape': $ optimalWidth = $ newWidth; $ optimalHeight = $ this-> getSizeByFixedWidth ($ newWidth); rompere; caso 'auto': $ optionArray = $ this-> getSizeByAuto ($ newWidth, $ newHeight); $ optimalWidth = $ optionArray ['optimalWidth']; $ optimalHeight = $ optionArray ['optimalHeight']; rompere; case 'crop': $ optionArray = $ this-> getOptimalCrop ($ newWidth, $ newHeight); $ optimalWidth = $ optionArray ['optimalWidth']; $ optimalHeight = $ optionArray ['optimalHeight']; rompere;  array di restituzione ('optimalWidth' => $ optimalWidth, 'optimalHeight' => $ optimalHeight); 

Passaggio 9 Dimensioni ottimali

Abbiamo già discusso di cosa fanno questi quattro metodi. Sono solo matematica di base, davvero, che calcolano il nostro miglior adattamento.

 funzione privata getSizeByFixedHeight ($ newHeight) $ ratio = $ this-> width / $ this-> height; $ newWidth = $ newHeight * $ ratio; return $ newWidth;  funzione privata getSizeByFixedWidth ($ newWidth) $ ratio = $ this-> height / $ this-> width; $ newHeight = $ newWidth * $ ratio; return $ newHeight;  funzione privata getSizeByAuto ($ newWidth, $ newHeight) if ($ this-> height < $this->width) // *** L'immagine da ridimensionare è più ampia (orizzontale) $ optimalWidth = $ newWidth; $ optimalHeight = $ this-> getSizeByFixedWidth ($ newWidth);  elseif ($ this-> height> $ this-> width) // *** L'immagine da ridimensionare è più alta (ritratto) $ optimalWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimalHeight = $ newHeight;  else // *** Image to be resizerd è un quadrato if ($ newHeight < $newWidth)  $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth ($ newwidth);  else if ($ newHeight> $ newWidth) $ optimalWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimalHeight = $ newHeight;  else // *** Sqaure ridimensionato a un quadrato $ optimalWidth = $ newWidth; $ optimalHeight = $ newHeight;  return array ('optimalWidth' => $ optimalWidth, 'optimalHeight' => $ optimalHeight);  funzione privata getOptimalCrop ($ newWidth, $ newHeight) $ heightRatio = $ this-> height / $ newHeight; $ widthRatio = $ this-> width / $ newWidth; se ($ heightRatio < $widthRatio)  $optimalRatio = $heightRatio;  else  $optimalRatio = $widthRatio;  $optimalHeight = $this->altezza / $ optimumRatio; $ optimalWidth = $ this-> width / $ optimalRatio; array di restituzione ('optimalWidth' => $ optimalWidth, 'optimalHeight' => $ optimalHeight); 

Passaggio 10

Se hai optato per un ritaglio, ovvero hai utilizzato l'opzione di ritaglio, hai un altro piccolo passaggio. Stiamo andando a ritagliare l'immagine dal
centro. Il ritaglio è un processo molto simile al ridimensionamento ma con un paio di altri parametri di dimensionamento passati.

 ritaglio di funzione privata ($ optimalWidth, $ optimalHeight, $ newWidth, $ newHeight) // *** Find center: verrà utilizzato per il raccolto $ cropStartX = ($ optimalWidth / 2) - ($ newWidth / 2); $ cropStartY = ($ optimalHeight / 2) - ($ newHeight / 2); $ crop = $ this-> imageResized; // imagedestroy ($ this-> imageResized); // *** Ora ritaglia dal centro alla dimensione richiesta esatta $ this-> imageResized = imagecreatetruecolor ($ newWidth, $ newHeight); imagecopyresampled ($ this-> imageResized, $ crop, 0, 0, $ cropStartX, $ cropStartY, $ newWidth, $ newHeight, $ newWidth, $ newHeight); 

Passaggio 11 Salva l'immagine

Ci stiamo arrivando; quasi fatto. Ora è il momento di salvare l'immagine. Passiamo nel percorso e la qualità dell'immagine che vorremmo va da 0 a 100, 100 è la migliore e chiamiamo il metodo appropriato. Un paio di cose da notare sulla qualità dell'immagine: JPG usa una scala da 0 a 100, 100 è la migliore. Le immagini GIF non hanno un'impostazione della qualità dell'immagine. I PNG lo fanno, ma usano la scala 0-9, 0 è la migliore. Questo non va bene perché non possiamo aspettarci di ricordarcelo ogni volta che vogliamo salvare un'immagine. Facciamo un po 'di magia per standardizzare tutto.

 public function saveImage ($ savePath, $ imageQuality = "100") // *** Ottieni estensione $ extension = strrchr ($ savePath, '.'); $ extension = strtolower ($ extension); switch ($ extension) case '.jpg': case '.jpeg': if (imagetypes () & IMG_JPG) imagejpeg ($ this-> imageResized, $ savePath, $ imageQuality);  rompere; case '.gif': if (imagetypes () & IMG_GIF) imagegif ($ this-> imageResized, $ savePath);  rompere; case '.png': // *** Qualità della scala da 0-100 a 0-9 $ scaleQuality = round (($ imageQuality / 100) * 9); // *** Invertire l'impostazione di qualità come 0 è il migliore, non 9 $ invertScaleQuality = 9 - $ scaleQuality; if (imagetypes () & IMG_PNG) imagepng ($ this-> imageResized, $ savePath, $ invertScaleQuality);  rompere; // ... ecc default: // *** Nessuna estensione - Nessun salvataggio. rompere;  imagedestroy ($ this-> imageResized); 

Ora è anche un buon momento per distruggere la nostra risorsa immagine per liberare memoria. Se dovessi usarlo in produzione, potrebbe anche essere una buona idea catturare e restituire il risultato dell'immagine salvata.


Conclusione

Beh, questo è tutto, gente. Grazie per aver seguito questo tutorial, spero che lo trovi utile. Apprezzerei il tuo feedback, tramite i commenti qui sotto.