Share
Ooit een gebruiksvriendelijke, gebruiksvriendelijke methode gezocht om je afbeeldingen in PHP te vergroten of verkleinen? Wel, dat is waar PHP-klassen voor zijn - herbruikbare stukjes functionaliteit die we bellen om het vuile werk achter de schermen te doen. We gaan leren hoe we onze eigen klasse kunnen maken die goed gebouwd en uitbreidbaar is. Het formaat wijzigen moet eenvoudig zijn. Hoe makkelijk? Hoe zit het met drie stappen!
Voordat we het stapsgewijze proces bekijken, laten we een paar premiumopties van CodeCanyon bekijken. U kunt uit tientallen scripts en invoegtoepassingen voor het aanpassen van de grootte van afbeeldingen kiezen - hier vindt u een korte beschrijving van enkele scripts.
Dit is een eenvoudige PHP-klasse die het formaat van afbeeldingen meteen aanpast. Als u een voor PHP geschikte webserver gebruikt en elke vorm van afbeeldingenviewer hebt, is dit script ideaal voor u. Het behoudt altijd de beeldverhouding, zodat de gewijzigde afbeelding zijn vorm behoudt.
Beeld Resizer en Thumbnail CreatoranySize is een lichtgewicht, drop-in, volledig geautomatiseerd caching, make-you-coffee-en-bed-in-bed script waarmee je afbeeldingen (jpg, gif of png) van elk formaat kunt aanvragen en genereren.
anySize - Caching image resizerMet deze Magento-plug-in kunt u de maximale afbeeldingsbreedte en -hoogte instellen die voor de catalogusafbeelding kan worden geüpload. Het vermindert ook de bestandsgrootte van de catalogusafbeelding. Het zal u helpen het gebruik van uw schijfruimte te verminderen, aangezien de afmetingen van de afbeeldingen worden aangepast en gecomprimeerd.
Magento Image ResizeDeze PHP-klasse helpt je om de grootte van alle foto's te wijzigen en je eigen watermerk te maken.
Beeld Resizer en WatermakerRezImage is een eenvoudige en flexibele tool voor het aanpassen van bulkafbeeldingen, perfect voor webontwerpers of eigenaren van online winkels. Met deze tool kun je het formaat van een hele map met afbeeldingen aanpassen, ongeacht hoeveel er zijn - laad gewoon de map met de afbeeldingen, stel de breedte en hoogte in en niets meer. Bevat enkele resolutie-presets zoals VGA, HD, QXGA, QSXGA, enz ... maar u kunt ook uw eigen presets instellen.
RezImage - Eenvoudig formaat wijzigen in bulkafbeeldingen Om je een glimp te geven van wat we met onze klas proberen te bereiken, zou de klas moeten zijn:
Opmerking: dit is geen zelfstudie over het maken van klassen en objecten, en hoewel deze vaardigheid zou helpen, is het niet nodig om deze tutorial te volgen.
Er is veel te bedekken - Laten we beginnen.
We beginnen gemakkelijk. Maak in je werkmap twee bestanden: één genaamd index.php, de andere resize-class.php
Om u een idee te geven van wat we proberen te bereiken, beginnen we met het coderen van de oproepen die we zullen gebruiken om de grootte van de afbeeldingen te wijzigen. Open uw index.php bestand en voeg de volgende code toe.
Zoals u kunt zien, is er een mooie logica in wat we doen. We openen het afbeeldingsbestand, we stellen de dimensies in waarvan we de afbeeldingsgrootte willen aanpassen en het type formaat wijzigen.
Vervolgens slaan we de afbeelding op, kiezen we het gewenste beeldformaat en de beeldkwaliteit. Sla uw index.php-bestand op en sluit het.
Accentsconagua
// *** Neem de klasse include op ("resize-class.php"); // *** 1) Afbeelding initialiseren / laden $ resizeObj = nieuwe grootte wijzigen ('sample.jpg'); // *** 2) Afbeelding verkleinen (opties: exact, staand, liggend, automatisch, bijsnijden) $ resizeObj -> formaat wijzigen (150, 100, 'bijsnijden'); // *** 3) Afbeelding opslaan $ resizeObj -> saveImage ('sample-resized.gif', 100); Uit de bovenstaande code kun je zien dat we een jpg-bestand openen maar een gif opslaan. Vergeet niet dat het allemaal om flexibiliteit gaat.
It's Object-Oriented Programming (OOP) maakt dit gevoel van gemak mogelijk. Denk aan een klasse als een patroon; je kunt de gegevens inkapselen - nog een jargonterm die eigenlijk alleen maar betekent dat je de gegevens verbergt. We kunnen deze klasse vervolgens opnieuw en opnieuw gebruiken zonder de code voor het wijzigen van de grootte te hoeven herschrijven - u hoeft alleen de juiste methoden aan te roepen, net als in stap twee. Nadat ons patroon is gemaakt, maken we exemplaren van dit patroon, objecten genaamd.
"De construct-functie, ook wel een constructor genoemd, is een speciale klassenmethode die door de klasse wordt aangeroepen wanneer u een nieuw object maakt."
Laten we beginnen met het maken van onze resize-klasse. Open uw resize-class.php bestand. Hieronder is een echt skeletstructuur van de basisklasse die ik 'resize' heb genoemd. Let op de class variable comment line; hier zullen we onze belangrijke klassevariabelen later gaan toevoegen.
De construct-functie, ook wel een constructor genoemd, is een speciale klassemethode (de term "methode" is hetzelfde als de functie, maar als het over klassen en objecten gaat, wordt de term methode vaak gebruikt) die door de klas wordt aangeroepen wanneer u een nieuw object. Dit maakt het voor ons geschikt om wat initialisatie te doen - wat we in de volgende stap zullen doen.
Class resize // *** Class variables public function __construct ()
Let op: dat is a dubbele onderstrepingsteken voor de construct-methode.
We gaan de bovenstaande constructormethode wijzigen. Ten eerste geven we de bestandsnaam (en het pad) van onze afbeelding door om de grootte aan te passen. We noemen deze variabele $ fileName.
We moeten het bestand openen dat is doorgegeven met PHP (meer specifiek de PHP GD Library) zodat PHP de afbeelding kan lezen. We doen dit met de aangepaste methode 'openImage'. Ik zal zien hoe deze methode
werkt in een moment, maar voor nu moeten we het resultaat opslaan als een klassenvariabele. Een klassenvariabele is slechts een variabele, maar is specifiek voor die klasse. Weet je nog de opmerking over de klassenvariabele die ik eerder noemde? Voeg 'image' toe als een privévariabele door 'private $ image;' in te typen. Door de variabele in te stellen als 'Privé' stelt u het bereik van die variabele in zodat deze alleen door de klas kan worden benaderd. Vanaf nu kunnen we een oproep doen naar onze geopende afbeelding, ook wel een resource genoemd, die we later zullen gebruiken als we het formaat wijzigen.
Terwijl we bezig zijn, laten we de hoogte en breedte van de afbeelding opslaan. Ik heb het gevoel dat deze later nuttig zullen zijn.
Je zou nu het volgende moeten hebben.
Class resize // *** Klasse variabelen privé $ afbeelding; privé $ breedte; privé $ hoogte; function __construct ($ fileName) // *** Open het bestand $ this-> image = $ this-> openImage ($ fileName); // *** Verkrijg breedte en hoogte $ this-> width = imagesx ($ this-> afbeelding); $ this-> height = imagesy ($ this-> afbeelding);
Methoden imagesx en imagesy zijn ingebouwd in functies die deel uitmaken van de GD-bibliotheek. Ze halen respectievelijk de breedte en hoogte van uw afbeelding op.
In de vorige stap noemen we de aangepaste methode openImage. In deze stap gaan we die methode maken. We willen dat het script voor ons gaat nadenken, dus afhankelijk van welk bestandstype wordt doorgegeven, moet het script bepalen welke GD Library-functie het gebruikt om de afbeelding te openen. Dit wordt eenvoudig bereikt door de extensie van de bestanden te vergelijken met een switch-statement.
We geven ons bestand door, we willen het formaat wijzigen en die bestandsresource retourneren.
private function openImage ($ file) // *** Get extension $ extension = strtolower (strrchr ($ file, '.')); switch ($ extensie) case '.jpg': case '.jpeg': $ img = @imagecreatefromjpeg ($ file); breken; case '.gif': $ img = @imagecreatefromgif ($ bestand); breken; case '.png': $ img = @imagecreatefrompng ($ bestand); breken; standaard: $ img = false; breken; return $ img;
Dit is waar de liefde gebeurt. Deze stap is eigenlijk slechts een uitleg van wat we gaan doen - dus geen huiswerk hier. In de volgende stap gaan we een openbare methode maken die we zullen gebruiken om onze resize uit te voeren; het is dus logisch om in de breedte en hoogte door te geven, evenals informatie over hoe we het formaat van de afbeelding willen wijzigen. Laten we hier even over praten. Er zullen scenario's zijn waarbij u de grootte van een afbeelding naar een exacte grootte wilt wijzigen. Geweldig, laten we dit opnemen. Maar er zullen ook momenten zijn waarop je honderden afbeeldingen moet verkleinen en elke afbeelding heeft een andere beeldverhouding - denk portretfoto's. Het formaat van deze naar een exacte grootte zal ernstige vervorming veroorzaken. Als we onze opties bekijken om vervorming te voorkomen, kunnen we:
Beide opties zijn haalbaar, afhankelijk van uw behoeften.
Yep. we gaan proberen om al het bovenstaande te behandelen. Om samen te vatten, gaan we opties bieden om:
De resize-methode bestaat uit twee delen. De eerste is om de optimale breedte en hoogte voor onze nieuwe afbeelding te krijgen door een aantal aangepaste methoden te maken - en natuurlijk door te geven in onze 'resize' optie zoals hierboven beschreven. De breedte en hoogte worden geretourneerd als een array en ingesteld op hun respectieve variabelen. Voel je vrij om 'als referentie door te geven'- maar daar ben ik geen grote fan van.
Het tweede deel is wat de daadwerkelijke grootte doet. Om deze tutorialgrootte te beperken, laat ik je de volgende GD-functies lezen:
We slaan ook de uitvoer van de imagecreatetruecolor-methode (een nieuwe ware kleurenafbeelding) op als een klassenvariabele. Voeg 'private $ imageResized;' toe met uw andere klassevariabelen.
Het formaat wijzigen wordt uitgevoerd door een PHP-module die bekend staat als de GD-bibliotheek. Veel van de methoden die we gebruiken, worden geleverd door deze bibliotheek.
// *** Toevoegen aan klassevariabelen private $ imageResized;
publieke functie resizeImage ($ newWidth, $ newHeight, $ option = "auto") // *** Krijg optimale breedte en hoogte - op basis van $ option $ optionArray = $ this-> getDimensions ($ newWidth, $ newHeight, strtolower ( $ optie)); $ optimalWidth = $ optionArray ['optimWidth']; $ optimalHeight = $ optionArray ['optimHeight']; // *** Resample - maak afbeelding canvas van x, y size $ this-> imageResized = imagecreatetruecolor ($ optimumWidth, $ optimHeight); imagecopyresampled ($ this-> imageResized, $ this-> image, 0, 0, 0, 0, $ optimumWidth, $ optimHeight, $ this-> width, $ this-> height); // *** als optie 'bijsnijden' is, dan kunt u ook bijsnijden ($ option == 'crop') $ this-> crop ($ optimumWidth, $ optimHeight, $ newWidth, $ newHeight);
Hoe meer werk je nu doet, hoe minder je hoeft te doen als je het formaat wijzigt. Deze methode kiest de route die moet worden afgelegd, met als doel om de optimale breedte en hoogte voor het wijzigen van de grootte te krijgen op basis van de optie voor het wijzigen van de grootte. Het zal de juiste methode noemen, die we in de volgende stap zullen maken.
private functie getDimensions ($ newWidth, $ newHeight, $ option) switch ($ option) case 'exact': $ optimWidth = $ newWidth; $ optimHeight = $ newHeight; breken; case 'portrait': $ optimWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimHeight = $ newHeight; breken; case 'landscape': $ optimWidth = $ newWidth; $ optimaleHeight = $ this-> getSizeByFixedWidth ($ newWidth); breken; case 'auto': $ optionArray = $ this-> getSizeByAuto ($ newWidth, $ newHeight); $ optimalWidth = $ optionArray ['optimWidth']; $ optimalHeight = $ optionArray ['optimHeight']; breken; case 'crop': $ optionArray = $ this-> getOptimalCrop ($ newWidth, $ newHeight); $ optimalWidth = $ optionArray ['optimWidth']; $ optimalHeight = $ optionArray ['optimHeight']; breken; return array ('optimaleWidth' => $ optimaleWidth, 'optimHeight' => $ optimHeight); We hebben al besproken wat deze vier methoden doen. Het zijn gewoon basisberekeningen, die onze beste fit berekenen.
persoonlijke functie getSizeByFixedHeight ($ newHeight) $ ratio = $ this-> width / $ this-> height; $ newWidth = $ newHeight * $ ratio; return $ newWidth; private functie getSizeByFixedWidth ($ newWidth) $ ratio = $ this-> height / $ this-> width; $ newHeight = $ newWidth * $ ratio; return $ newHeight; private functie getSizeByAuto ($ newWidth, $ newHeight) if ($ this-> height < $this->width) // *** Afbeelding waarvan de grootte moet worden aangepast is breder (liggend) $ optimumWidth = $ newWidth; $ optimaleHeight = $ this-> getSizeByFixedWidth ($ newWidth); elseif ($ this-> height> $ this-> width) // *** Afbeelding waarvan de grootte moet worden aangepast is groter (portrait) $ optimumWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimHeight = $ newHeight; else // *** Afbeelding die moet worden geresizeerd is een vierkant if ($ newHeight < $newWidth) $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth ($ newWidth); else if ($ newHeight> $ newWidth) $ optimWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimHeight = $ newHeight; else // *** Sqaure wordt aangepast naar een vierkant $ optimaleWidth = $ newWidth; $ optimHeight = $ newHeight; return array ('optimaleWidth' => $ optimaleWidth, 'optimHighight' => $ optimHeight); private functie getOptimalCrop ($ newWidth, $ newHeight) $ heightRatio = $ this-> height / $ newHeight; $ widthRatio = $ this-> width / $ newWidth; if ($ heightRatio < $widthRatio) $optimalRatio = $heightRatio; else $optimalRatio = $widthRatio; $optimalHeight = $this->hoogte / $ optimumRatio; $ optimaleWidth = $ this-> width / $ optimRatio; return array ('optimaleWidth' => $ optimaleWidth, 'optimHeight' => $ optimHeight); Als je hebt gekozen voor een gewas, dat wil zeggen, je hebt de bijsnijdoptie gebruikt, dan heb je nog een kleine stap. We gaan de afbeelding bijsnijden van de
centrum. Bijsnijden is een vergelijkbaar proces als het wijzigen van het formaat, maar met een paar meer dimensioneringsparameters doorgegeven.
bijsnijden van persoonlijke functies ($ optimumWidth, $ optimHeight, $ newWidth, $ newHeight) // *** Find center - dit wordt gebruikt voor de crop $ cropStartX = ($ optimumWidth / 2) - ($ newWidth / 2); $ cropStartY = ($ optimumHeight / 2) - ($ newHeight / 2); $ crop = $ this-> imageResized; // imagedestroy ($ this-> imageResized); // *** Versleep nu vanuit het midden naar exact de gevraagde grootte $ this-> imageResized = imagecreatetruecolor ($ newWidth, $ newHeight); imagecopyresampled ($ this-> imageResized, $ crop, 0, 0, cropStartX, $ cropStartY, $ newWidth, $ newHeight, $ newWidth, $ newHeight);
We komen er; bijna klaar. Het is nu tijd om de afbeelding op te slaan. We geven het pad door en de beeldkwaliteit die we zouden willen hebben, variërend van 0-100, 100 is de beste, en bel de juiste methode. Een paar dingen om op te merken over de beeldkwaliteit: JPG gebruikt een schaal van 0-100, waarvan 100 de beste is. GIF-afbeeldingen hebben geen instelling voor de beeldkwaliteit. PNG's doen, maar ze gebruiken de schaal 0-9, waarbij 0 de beste is. Dit is niet goed, want we kunnen niet verwachten dat we dit onthouden elke keer dat we een afbeelding willen opslaan. We doen een beetje magie om alles te standaardiseren.
openbare functie saveImage ($ savePath, $ imageQuality = "100") // *** Get extension $ extension = strrchr ($ savePath, '.'); $ extension = strtolower ($ extensie); switch ($ extensie) case '.jpg': case '.jpeg': if (imagetypes () & IMG_JPG) imagejpeg ($ this-> imageResized, $ savePath, $ imageQuality); pauze; case '.gif': if (imagetypes () & IMG_GIF) imagegif ($ this-> imageResized, $ savePath); pauze; case '.png': // *** Schaalkwaliteit van 0-100 tot 0-9 $ scaleQuality = round (($ imageQuality / 100) * 9); // *** Kwaliteitsinstelling omkeren als 0 is het beste, niet 9 $ invertScaleQuality = 9 - $ scaleQuality; if (imagetypes () & IMG_PNG) imagepng ($ this-> imageResized, $ savePath, $ invertScaleQuality); pauze; // ... etc default: // *** Geen extensie - niet opslaan. breken; imagedestroy ($ this-> imageResized);
Dit is ook een goed moment om onze beeldbron te vernietigen om geheugen vrij te maken. Als u dit tijdens de productie zou gebruiken, zou het ook een goed idee kunnen zijn om het resultaat van de opgeslagen afbeelding vast te leggen en terug te sturen.
Nou dat is het, mensen. Bedankt voor het volgen van deze tutorial. Ik hoop dat je het nuttig vindt. Ik stel uw feedback op prijs via de onderstaande opmerkingen.
