Bildåterställning görs enkelt med PHP

Har du någonsin velat ha en allsidig, lättanvänd metod för att ändra storlek på dina bilder i PHP? Tja, det är vad PHP-klasserna är för - återanvändbara funktioner som vi kallar för att göra det smutsiga arbetet bakom kulisserna. Vi ska lära oss hur vi skapar vår egen klass som är väl konstruerad, såväl som utbyggbar. Ändring av storlek bör vara enkelt. Hur enkelt? Vad sägs om tre steg!

Premium Image Ändra scripts

Innan vi går in i steg-för-steg-processen, låt oss titta på några premiumalternativ från CodeCanyon. Det finns dussintals bildändringsskript och plugins att välja mellan. Här är en snabb titt på några av dem.

1. Bildresenär och miniatyr skapare

Detta är en enkel PHP-klass som ändrar storlek på bilderna. Om du använder någon PHP-aktiverad webbserver, och har någon form av bildvisare, är det här skriptet idealiskt för dig. Det behåller alltid bildförhållandet, så den ändrade bilden håller sin form.

Bildresenär och miniatyr skapare

2. anySize - Caching bildreser

anySize är ett lättviktigt, inbyggt, helautomatiserat, caching, make-you-coffee-and-serve-it-in-bed-skript som låter dig begära och generera bilder (jpg, gif eller png) av alla storlekar.

anySize - Caching bildresenär

3. Magento Image Resize

Med denna Magento-plugin kan du ställa in maximal bildbredd och höjd som kan laddas upp för katalogbilden. Det minskar också filstorleken på katalogbilden. Det hjälper dig att minska användningen av diskutrymme eftersom bilderna kommer att ändras och komprimeras.

Magento Image Resize

4. Bildresenär och vattenstämpel

Denna PHP-klass hjälper dig att ändra storlek på alla foton och skapa ditt personliga vattenmärke.

Bildresenär och vattenstämpel

5. RezImage - Easy Bulk Image Resizing

RezImage är ett enkelt och flexibelt verktyg för storleksändring, perfekt för webbdesigners eller webbshopägare. Med det här verktyget kan du ändra storlek på en hel mapp full av bilder, oavsett hur många det finns. Bara ladda mappen med bilderna, sätt bredden och höjden och ingenting mer. Innehåller vissa upplösningsinställningar som VGA, HD, QXGA, QSXGA, etc ... men du kan också ställa in din egen.

RezImage - Easy Bulk Image Resizing

Introduktion

För att ge dig en snabb inblick i vad vi försöker uppnå med vår klass ska klassen vara:

  • Lätt att använda
  • Formatera oberoende. I.E., öppna, ändra storlek och spara ett antal olika bildformat.
  • Intelligent limning - Ingen bildförvrängning!

Obs! Det här är inte en handledning om hur man skapar klasser och objekt, och även om denna färdighet skulle hjälpa, är det inte nödvändigt att följa denna handledning.

Det finns mycket att täcka - Låt oss börja.


Steg 1 Framställning

Vi börjar lätt. I din arbetsregister skapar du två filer: en som heter index.php, den andra resize-class.php


Steg 2 Ringer objektet

För att ge dig en uppfattning om vad vi försöker uppnå börjar vi genom att koda samtalen vi ska använda för att ändra storlek på bilderna. Öppna din index.php-fil och lägg till följande kod.

Som ni kan se finns det en bra logik på vad vi gör. Vi öppnar bildfilen, vi ställer in de mått vi vill ändra storlek på bilden till och typen av storlek.
Då sparar vi bilden, väljer det bildformat vi vill ha och bildkvaliteten. Spara och stäng din index.php-fil.

 // *** Inkludera klassen inkluderar ("resize-class.php"); // *** 1) Initiera / ladda bild $ resizeObj = ny storlek ('sample.jpg'); // *** 2) Ändra storlek på bild (alternativ: exakt, porträtt, landskap, auto, grödor) $ resizeObj -> resizeImage (150, 100, 'crop'); // *** 3) Spara bild $ resizeObj -> saveImage ('sample-resized.gif', 100);

Från koden ovan kan du se att vi öppnar en jpg-fil men sparar ett gif. Kom ihåg att det handlar om flexibilitet.


Steg 3 klassskelett

Det är Objektorienterad Programmering (OOP) som gör denna lätthet möjlig. Tänk på en klass som ett mönster; du kan inkapsla data - en annan jargong term som egentligen bara innebär att gömma data. Vi kan sedan återanvända den här klassen om och om igen utan att behöva skriva om någon av storlekskoden - du behöver bara ringa till lämpliga metoder precis som vi gjorde i steg två. När vårt mönster har skapats skapar vi instanser av detta mönster, som heter objekt.

"Konstruktionsfunktionen, känd som en konstruktör, är en speciell klassmetod som kallas av klassen när du skapar ett nytt objekt."

Låt oss börja skapa vår storleksklass. Öppna din resize-class.php-fil. Nedan är en riktigt grundläggande klassskelettstruktur som jag heter "resize". Notera kommandoraden för klassvariabeln; Det här är var vi börjar börja lägga till våra viktiga klassvariabler senare.

Konstruktionsfunktionen, som kallas en konstruktör, är en specialklassmetod (termen "metod" är densamma som funktion, men när man talar om klasser och objekt används termen metod ofta) som kallas av klassen när du skapar ett nytt objekt. Det gör det lämpligt för oss att göra några initialiseringar - vilket vi gör i nästa steg.

 Klassändring // *** Klassvariabler offentlig funktion __construct () 

Observera att det är a dubbel understrykning för konstruktionsmetoden.


Steg 4 Konstruktören

Vi kommer att ändra konstruktormetoden ovan. För det första kommer vi att skicka in filnamnet (och sökvägen) för vår bild som ska ändras. Vi ringer denna variabel $ fileName.

Vi måste öppna filen som skickats in med PHP (mer specifikt PHP GD-biblioteket) så PHP kan läsa bilden. Vi gör detta med den anpassade metoden "openImage". Jag kommer till hur denna metod
fungerar i ett ögonblick, men för nu måste vi spara resultatet som en klassvariabel. En klassvariabel är bara en variabel - men den är specifik för den klassen. Kommer du ihåg klassvariablerna som jag nämnde tidigare? Lägg till 'bild' som en privat variabel genom att skriva 'privat $ image;'. Genom att ställa in variabeln som "Privat" ställer du in räckvidden för den variabel så att den endast kan nås av klassen. Från och med nu kan vi ringa till vår öppnade bild, känd som en resurs, som vi kommer att göra senare när vi ändrar storlek.

Medan vi är på det, låt oss lagra bildens höjd och bredd. Jag har en känsla av att dessa kommer att vara användbara senare.

Du borde nu ha följande.

 Klassändring // *** Klassvariabler privat $ bild; privat $ bredd; privat $ höjd; funktion __construct ($ fileName) // *** Öppna filen $ this-> image = $ this-> openImage ($ fileName); // *** Få bredd och höjd $ this-> width = imagesx ($ this-> bild); $ this-> height = imagesy ($ this-> bild); 

Metoder imagesx och imagesy är inbyggda i funktioner som ingår i GD-biblioteket. De hämtar respektive bildens bredd och höjd.


Steg 5 Öppnar bilden

I föregående steg kallar vi den anpassade metoden openImage. I det här steget kommer vi att skapa den metoden. Vi vill att manuset ska göra vårt tänkande för oss, så beroende på vilken filtyp som skickas in, ska man bestämma vilken GD Biblioteksfunktion den ringer för att öppna bilden. Detta uppnås enkelt genom att jämföra filtillägget med en omkopplingsdeklaration.

Vi skickar i vår fil vi vill ändra storlek och returnera den filresursen.

 privat funktion openImage ($ file) // *** Få förlängning $ extension = strtolower (strrchr ($ file, '.')); switch ($ extension) case '.jpg': case '.jpeg': $ img = @imagecreatefromjpeg ($ file); ha sönder; case '.gif': $ img = @imagecreatefromgif ($ file); ha sönder; case '.png': $ img = @imagecreatefrompng ($ file); ha sönder; standard: $ img = false; ha sönder;  returnera $ img; 

Steg 6 Hur man ändrar storlek

Det är här kärleken händer. Detta steg är egentligen bara en förklaring till vad vi ska göra - så inga läxor här. I nästa steg ska vi skapa en offentlig metod som vi ringer för att utföra vår storlek. så det är vettigt att passera i bredd och höjd, liksom information om hur vi vill ändra storlek på bilden. Låt oss prata om detta en stund. Det kommer att finnas scenarier där du skulle vilja ändra storlek på en bild till en exakt storlek. Bra, låt oss inkludera detta. Men det kommer också att finnas tidpunkter när du måste ändra storlek på hundratals bilder och varje bild har ett annat bildförhållande - tänk porträttbilder. Om du ändrar dem till en exakt storlek kommer det att orsaka allvarlig snedvridning. Om vi ​​tittar på våra alternativ för att förhindra förvrängning kan vi:

  1. Ändra storleken på bilden så nära som möjligt till våra nya bilddimensioner, samtidigt som bildformatet hålls.
  2. Ändra storlek på bilden så nära som möjligt till våra nya bilddimensioner och beskär resten.

Båda alternativen är livskraftiga, beroende på dina behov.

Japp. Vi ska försöka hantera alla ovanstående. För att återskapa ska vi erbjuda alternativ till:

  1. Ändra storlek med exakt bredd / höjd. (exakt)
  2. Ändra storlek efter bredd - exakt bredd kommer att ställas in, höjden justeras enligt bildförhållande. (landskap)
  3. Ändra storlek efter höjd - som Ändra storlek efter bredd, men höjden ställs in och bredden justeras dynamiskt. (porträtt)
  4. Auto bestämma alternativ 2 och 3. Om du slingrar igenom en mapp med olika storlekar foton, låt manuset avgöra hur man hanterar detta. (bil)
  5. Ändra storlek och skör sedan. Detta är min favorit. Exakt storlek, ingen snedvridning. (beskära)

Steg 7 Ändra storlek. Vi gör det!

Det finns två delar till resize-metoden. Den första är att få den optimala bredden och höjden för vår nya bild genom att skapa några anpassade metoder - och givetvis passera i vårt resize-alternativ "som beskrivits ovan. Bredden och höjden returneras som en array och ställs in till respektive variabler. Känn dig fri att "passera som referens" - men jag är inte en stor fan av det.

Den andra delen är vad som utför den faktiska storleken. För att hålla denna handledningstorlek nere ska jag låta dig läsa igenom följande GD-funktioner:

  • imagecreatetruecolor
  • imagecopyresampled.

Vi sparar också produktionen av imagecreatetruecolor-metoden (en ny sann färgbild) som en klassvariabel. Lägg till "privat $ imageResized;" med dina andra klassvariabler.

Ändring av storlek görs av en PHP-modul som kallas GD Bibliotek. Många av de metoder vi använder tillhandahålls av detta bibliotek.

 // *** Lägg till klassvariabler privat $ imageResized;
 public function resizeImage ($ newWidth, $ newHeight, $ option = "auto") // *** Få optimal bredd och höjd - baserad på $ option $ optionArray = $ this-> getDimensions ($ newWidth, $ newHeight, strtolower $ tillval)); $ optimalWidth = $ optionArray ['optimalWidth']; $ optimalHeight = $ optionArray ['optimalHeight']; // *** Resample - skapa bildduk av x, y storlek $ this-> imageResized = imagecreatetruecolor ($ optimalWidth, $ optimalHeight); imagecopyresampled ($ this-> imageResized, $ this-> bild, 0, 0, 0, 0, $ optimalWidth, $ optimalHeight, $ this-> width, $ this-> height); // *** om alternativet är "grödor", sedan skörda även om ($ option == 'crop') $ this-> crop ($ optimalWidth, $ optimalHeight, $ newWidth, $ newHeight); 

Steg 8 Beslutstreet

Ju mer arbete du gör nu desto mindre måste du göra när du ändrar storlek. Den här metoden väljer vägen att ta med målet att få den optimala storleken och höjden av storlek på grundval av ditt resize-alternativ. Det kallar lämplig metod, som vi kommer att skapa i nästa steg.

 privat funktion getDimensions ($ newWidth, $ newHeight, $ option) switch ($ option) case \ "exact \": $ optimalWidth = $ newWidth; $ optimalHeight = $ newHeight; ha sönder; fall "porträtt": $ optimalWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimalHeight = $ newHeight; ha sönder; fall "landskap": $ optimalWidth = $ newWidth; $ optimalHeight = $ this-> getSizeByFixedWidth ($ newWidth); ha sönder; fallet "auto": $ optionArray = $ this-> getSizeByAuto ($ newWidth, $ newHeight); $ optimalWidth = $ optionArray ['optimalWidth']; $ optimalHeight = $ optionArray ['optimalHeight']; ha sönder; fall "gröda": $ optionArray = $ this-> getOptimalCrop ($ newWidth, $ newHeight); $ optimalWidth = $ optionArray ['optimalWidth']; $ optimalHeight = $ optionArray ['optimalHeight']; ha sönder;  returnera array ('optimalWidth' => $ optimalVidth, 'optimalHeight' => $ optimalHeight); 

Steg 9 Optimal Dimensioner

Vi har redan diskuterat vad dessa fyra metoder gör. De är bara grundläggande matte, som verkligen beräknar vår bästa passform.

 privat funktion getSizeByFixedHeight ($ newHeight) $ ratio = $ this-> width / $ this-> height; $ newWidth = $ newHeight * $ ratio; returnera $ newWidth;  privat funktion getSizeByFixedWidth ($ newWidth) $ ratio = $ this-> height / $ this-> width; $ newHeight = $ newWidth * $ ratio; returnera $ newHeight;  privat funktion getSizeByAuto ($ newWidth, $ newHeight) om ($ this-> height < $this->bredd) // *** Bild som ska ändras är bredare (landskap) $ optimalWidth = $ newWidth; $ optimalHeight = $ this-> getSizeByFixedWidth ($ newWidth);  elseif ($ this-> height> $ this-> width) // *** Bild som ska ändras är högre (porträtt) $ optimalWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimalHeight = $ newHeight;  else // *** Bild som ska resizeras är en kvadrat om ($ newHeight < $newWidth)  $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth ($ newWidth);  annars om ($ newHeight> $ newWidth) $ optimalWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimalHeight = $ newHeight;  else // *** Sqaure ändras till en kvadrat $ optimalWidth = $ newWidth; $ optimalHeight = $ newHeight;  returnera array ('optimalWidth' => $ optimalWidth, 'optimalHeight' => $ optimalHeight);  privat funktion getOptimalCrop ($ newWidth, $ newHeight) $ heightRatio = $ this-> height / $ newHeight; $ widthRatio = $ this-> width / $ newWidth; om ($ heightRatio < $widthRatio)  $optimalRatio = $heightRatio;  else  $optimalRatio = $widthRatio;  $optimalHeight = $this->höjd / $ optimalRatio; $ optimalWidth = $ this-> width / $ optimalRatio; returnera array ('optimalWidth' => $ optimalWidth, 'optimalHeight' => $ optimalHeight); 

Steg 10 Beskär

Om du har valt en gröda - det vill säga, du har använt beskärningsalternativet, har du ytterligare ett litet steg. Vi ska beskära bilden från
Centrum. Beskärning är en mycket liknande process för att ändra storlek, men med ett par större parametrar passerade in.

 Private Function crop ($ optimalWidth, $ optimalHeight, $ newWidth, $ newHeight) // *** Hitta centrum - detta kommer att användas för grödan $ cropStartX = ($ optimalWidth / 2) - ($ newWidth / 2); $ cropStartY = ($ optimalHeight / 2) - ($ newHeight / 2); $ crop = $ this-> imageResized; // imagedestroy ($ this-> imageResized); // *** Nu beskär från centrum till exakt önskad storlek $ this-> imageResized = imagecreatetruecolor ($ newWidth, $ newHeight); imagecopyresampled ($ this-> imageResized, $ crop, 0, 0, $ cropStartX, $ cropStartY, $ newWidth, $ newHeight, $ newWidth, $ newHeight); 

Steg 11 Spara bilden

Vi kommer dit nästan klar. Nu är det dags att spara bilden. Vi passerar i banan och bildkvaliteten vi vill ha varierar från 0-100, 100 är bäst, och kallar lämplig metod. Ett par saker att notera om bildkvaliteten: JPG använder en skala från 0-100, 100 är bäst. GIF-bilder har ingen bildkvalitet inställning. PNG: s gör, men de använder skalan 0-9, 0 är bäst. Det här är inte bra eftersom vi inte kan förvänta oss att vi kommer ihåg det varje gång vi vill spara en bild. Vi gör lite magi för att standardisera allt.

 offentlig funktion saveImage ($ savePath, $ imageQuality = "100") // *** Få förlängning $ extension = strrchr ($ savePath, '.'); $ extension = strtolower ($ extension); switch ($ extension) case '.jpg': case '.jpeg': om (imagetypes () & IMG_JPG) imagejpeg ($ this-> imageResized, $ savePath, $ imageQuality);  ha sönder; case '.gif': om (imagetypes () & IMG_GIF) imagegif ($ this-> imageResized, $ savePath);  ha sönder; case '.png': // *** Skalkvalitet från 0-100 till 0-9 $ scaleQuality = round (($ imageQuality / 100) * 9); // *** Invertera kvalitetsinställning eftersom 0 är bäst, inte 9 $ invertScaleQuality = 9 - $ scaleQuality; om (imagetypes () & IMG_PNG) imagepng ($ this-> imageResized, $ savePath, $ invertScaleQuality);  ha sönder; // ... etc default: // *** Ingen förlängning - Ingen spara. ha sönder;  imagedestroy ($ this-> imageResized); 

Nu är det också en bra tid att förstöra vår bildresurs för att frigöra lite minne. Om du skulle använda detta i produktion, kan det också vara en bra idé att fånga och returnera resultatet av den sparade bilden.


Slutsats

Jo det är det, folk. Tack för att du följer den här handledningen, hoppas du tycker att den är användbar. Jag skulle uppskatta din feedback, via kommentarerna nedan.