Afbeeldingen manipuleren in PHP met GD

Het internet zou behoorlijk saai zijn zonder afbeeldingen. Het onderhoud en het manipuleren van honderden of duizenden afbeeldingen voor uw website kan echter een hoofdpijn zijn. Naarmate het ontwerp van uw site verandert, moet u mogelijk al uw afbeeldingen wijzigen. U moet bijvoorbeeld mogelijk al uw afbeeldingen converteren naar grijswaarden of de grootte wijzigen naar 50% van hun oorspronkelijke formaat. U kunt ook verschillende afbeeldingen comprimeren of bijsnijden. Dit handmatig doen is tijdrovend en foutgevoelig, maar met een beetje programmeerkennis kan het geautomatiseerd worden.

In deze zelfstudie leert u meer over de GD (Graphic Draw) -bibliotheek in PHP. U zult zien hoe deze bibliotheek kan worden gebruikt om afbeeldingen te bewerken door ze te vergroten / verkleinen, bij te snijden, te draaien of te filteren.

Wat is GD?

PHP kan veel meer dan alleen HTML aan bezoekers aanbieden. Het heeft bijvoorbeeld de mogelijkheid om afbeeldingen te manipuleren. Niet alleen dat, maar u kunt ook uw eigen afbeeldingen helemaal opnieuw maken en ze vervolgens opslaan of aan gebruikers aanbieden.

PHP kan bijna al je basisbeeldmanipulatiebehoeften aan met behulp van de GD-bibliotheek - kort voor Graphic Draw. 

Opstelling

Als u met Windows werkt, kunt u de php_gd2.dll bestand als een extensie in php.ini. Als u zoiets als XAMPP gebruikt, vindt u de php_gd2.dll bestand in de map xampp \ php \ ext. U kunt ook controleren of GD op uw systeem is geïnstalleerd met behulp van de functie phpinfo ();. Als u door de resulterende uitvoer bladert, vindt u iets dat op het volgende lijkt.

U kunt ook naar de vereisten en installatiepagina's gaan voor meer informatie over het installatieproces.

Afbeeldingen maken met PHP GD

De eerste stap op weg naar manipulatie van afbeeldingen met behulp van PHP is het laden ervan in het geheugen als een beeldbron. Dit kan worden bereikt door verschillende functies voor verschillende indelingen te gebruiken. Al deze functies hebben zeer vergelijkbare namen, dus ze zijn gemakkelijk te onthouden.

Maak een nieuwe afbeelding

De imagecreatetruecolor () functie zal nuttig zijn als u geen originele afbeeldingsbron heeft die u wilt manipuleren. Het accepteert twee integer parameters: een breedte en hoogte. Het levert een beeldresource op als alles volgens plan verloopt. De geretourneerde afbeeldingsbron is in feite een zwart beeld met een opgegeven breedte en hoogte.

Laad een afbeeldingsbestand

Als u van plan bent beelden te manipuleren die al ergens zijn opgeslagen, profiteert u van functies zoals imagecreatefromjpeg (), imagecreatefrompng (), en imagecreatefromgif (). Hiermee wordt een afbeeldingsresource gemaakt met alle gegevens uit het geladen afbeeldingsbestand. Deze functies accepteren een enkele parameter die de locatie van de afbeelding die u laadt, opgeeft als een URL of als een bestandspad.

Maak een afbeelding van een string

In de GD-bibliotheek kunt u ook afbeeldingen van een tekenreeks maken met behulp van de imagecreatefromstring () functie in PHP. Vergeet niet dat je moet gebruiken base64_decode () op de gegeven string eerder imagecreatefromstring (). De functie kan automatisch detecteren of het afbeeldingstype JPG, PNG, GIF of een ander ondersteund formaat is.

Roteren, schalen, bijsnijden en een afbeelding omdraaien

Sommige veel voorkomende bewerkingen die u op een afbeeldingsbron wilt uitvoeren, zijn roteren, schalen, bijsnijden en omdraaien.

omwenteling

U kunt een afbeelding die u al in het script hebt geladen, roteren met behulp van de imagerotate () functie. Het roteert het beeld in de opgegeven hoek met het midden van het beeld als middelpunt van rotatie. De hoek wordt gegeven als een zweefwaarde en volgens PHP is dit de graadwaarde voor rotatie. 

Soms heeft de geroteerde afbeelding andere dimensies in vergelijking met de originele versie. Dit betekent dat je na de rotatie terecht komt in een ongedekt gebied. De derde parameter van de imagerotate () functie kan worden gebruikt om de achtergrondkleur van het lege gebied na rotatie te specificeren.

scaling

Het is heel eenvoudig om een ​​afbeelding te schalen met behulp van de GD-bibliotheek. U hoeft alleen de afbeeldingsbron evenals de breedte en hoogte door te geven aan de Schaal afbeelding () functie. Als u de hoogte weglaat, schaalt GD de afbeelding naar de opgegeven breedte met behoud van de beeldverhouding. 

U kunt ook de modus opgeven voor het schalen van de afbeelding. Het kan worden ingesteld op IMG_NEAREST_NEIGHBOUR, IMG_BILINEAR_FIXED, IMG_BICUBIC, etc. Een belangrijk ding dat u moet onthouden, is dat deze functie een nieuwe geschaalde afbeeldingsbron retourneert in plaats van de oorspronkelijke bron te wijzigen.

bijsnijden

U kunt elke beeldresource bijsnijden met behulp van de imagecrop () functie in GD. De eerste parameter is de oorspronkelijke afbeeldingsbron en de tweede parameter is een associatieve array met de toetsen X, Y, breedte, en hoogte, specificatie van de positie en afmetingen van het bijsnijdvenster.

De vlinderafbeelding hierboven is bijgesneden met behulp van de volgende code:

$ im_php = imagecreatefromjpeg ('pad / naar / afbeelding'); $ size = min (imagesx ($ im_php), imagesy ($ im_php)); $ im_php = imagecrop ($ im_php, ['x' => $ size * 0.4, 'y' => 0, 'width' => $ size, 'height' => $ size]); $ im_php = imagescale ($ im_php, 300);

Kortom, we slaan de lengte op van de kleinste zijde in de $ size variabel. Deze variabele wordt vervolgens gebruikt om de grens van onze bijsnijdrechthoek te definiëren. Ten slotte wordt de afbeelding zodanig verkleind dat deze slechts 300 pixels breed en lang is. Dit geeft ons een vierkant beeld van de juiste grootte.

Afbeeldingen omdraaien

Afbeeldingen kunnen horizontaal, verticaal of in beide richtingen worden omgedraaid met behulp van de imageflip () functie. Het accepteert de afbeeldingsbron die u wilt omdraaien als de eerste parameter en de flip-modus als de tweede parameter. De flip-modus kan worden ingesteld op IMG_FLIP_HORIZONTAL, IMG_FLIP_VERTICAL, of IMG_FLIP_BOTH.

De afbeelding linksboven in de bovenstaande afbeelding is het origineel. De afbeelding rechtsboven is gemaakt met IMG_FLIP_HORIZONTAL, de afbeelding linksonder is gemaakt met IMG_FLIP_VERTICAL, en de afbeelding rechtsonder is gemaakt met IMG_FLIP_BOTH. (De kraaiafbeelding is van Pixabay.)

Filters toepassen op een afbeelding

GD heeft ook een zeer nuttig ImageFilter () functie die filters kan toepassen op verschillende beeldbronnen die worden geladen met behulp van de functies van vorige afbeeldingen. Deze functie kan verschillende parameters accepteren, afhankelijk van het filter dat u toepast.

Geef om te beginnen de afbeeldingsresource op en de naam van het filter dat u wilt toepassen. U kunt dit instellen op een van de 12 voorgedefinieerde filtertypen die in de documenten worden vermeld. 

  • IMG_FILTER_NEGATE: keert de kleuren in de afbeelding om
  • IMG_FILTER_GRAYSCALE: verwijdert kleur uit de afbeelding
  • IMG_FILTER_BRIGHTNESS: maakt het beeld helderder of donkerder
  • IMG_FILTER_CONTRAST: verhoogt het beeldcontrast 
  • IMG_FILTER_COLORIZE: tinten de afbeelding naar een geselecteerde kleur
  • IMG_FILTER_EDGEDETECT: markeert de randen van de afbeelding
  • IMG_FILTER_EMBOSS: vergelijkbaar met randdetectie, maar geeft elke rand een verhoogde look
  • IMG_FILTER_GAUSSIAN_BLUR: vervaagt de afbeelding met de Gauss-methode
  • IMG_FILTER_SELECTIVE_BLUR: vervaagt de afbeelding met de selectieve methode
  • IMG_FILTER_MEAN_REMOVAL: een effect om een ​​gestileerde afbeelding te maken
  • IMG_FILTER_SMOOTH: maakt gekartelde randen in de afbeelding gladder
  • IMG_FILTER_PIXELATE: zorgt ervoor dat de afbeelding er korrelig uitziet 

Sommige filters houden van ontkennen, GRAYSCALE, RAND DETECTIE en EMBOSS geen extra gegevens nodig. Andere filters, zoals HELDERHEID, CONTRAST en GLAD, kan een extra parameter accepteren die de hoeveelheid helderheid, contrast of vloeiendheid van de uiteindelijke afbeelding aangeeft. De pixelate parameter stelt u in staat om twee extra parameters te specificeren: de blokgrootte en de modus van pixelatie. eindelijk, de inkleuren filter accepteert vier parameters die de waarden voor de rode, groene en blauwe componenten bepalen, evenals het alfakanaal.

De afbeelding links bovenaan is het origineel. De afbeelding rechtsboven is gemaakt met behulp van de inkleuren filter, linksonder is gemaakt met de GRAYSCALE filter en de afbeelding rechtsonder is gemaakt met de HELDERHEID filter. (Deze vlinderafbeelding is gevonden op Pixabay.)

Andere handige functies voor beeldmanipulatie

U moet ook enkele andere algemene GD-functies kennen die zo nu en dan van pas komen.

Beeldafmetingen verkrijgen

U kunt de breedte en hoogte van een afbeeldingsbron bepalen met behulp van de imagesx () en imagesy () functies.

Een andere functie genaamd getimagesize () kan ook worden gebruikt om de breedte en hoogte van een afbeelding samen met het type ervan te krijgen. Deze functie retourneert een array met elementen die de breedte, hoogte en indeling van de afbeelding opgeven. De eerste twee elementen van de array beschrijven de breedte en hoogte en het derde element bevat een constante die het bestandsformaat opgeeft: een van IMAGETYPE_PNG, IMAGETYPE_GIF, enz.

Een afbeelding opslaan

Nadat u alle gewenste wijzigingen in een afbeelding hebt aangebracht, wilt u deze waarschijnlijk naar de browser uitvoeren of als een bestand opslaan. In beide gevallen moet u een van de GD-uitgangsfuncties gebruiken, zoals imagejpeg (), imagepng (), of imagegif (). U geeft uw beeldresource door aan een van deze uitvoerfuncties en als u de afbeelding in een bestand wilt opslaan, geeft u ook een bestandsnaam op. U kunt ook de kwaliteit van het uitgevoerde beeld regelen met behulp van een derde optionele parameter, afhankelijk van het afbeeldingstype.

Het formaat van alle afbeeldingen in een map wijzigen

Laten we de kennis die we tot nu toe hebben opgedaan toepassen om iets praktischs te doen. In deze sectie zullen we het formaat van alle JPEG-afbeeldingen in een bepaalde map aanpassen om een ​​breedte van 640 pixels te hebben. De hoogte wordt automatisch berekend op basis van de afmetingen van de originele afbeelding.

We slaan de gewijzigde afbeeldingen op in een nieuwe map met de titel resized. Alle originele afbeeldingen hebben in dit geval dezelfde afmetingen, maar de code zal correct werken met afbeeldingen die verschillende grootten en hoogte-breedteverhoudingen hebben.

$ directory = 'Natuur /'; $ images = glob ($ directory. "*. jpg"); foreach ($ images as $ image) $ im_php = imagecreatefromjpeg ($ afbeelding); $ im_php = imagescale ($ im_php, 640); $ new_height = imagesy ($ im_php); $ new_name = str_replace ('- 1920x1080', '-640x'. $ new_height, basename ($ image)); imagejpeg ($ im_php, $ directory.'Resized /'.$ new_name); 

In de bovenstaande code beginnen we met het gebruik van de glob () functie om alle afbeeldingen te vinden met een .jpg extensie in de directory met de naam Natuur. De beeldbestanden worden opgeslagen in een array en we herhalen ze één voor één.

Omdat alle afbeeldingen waarvan we de grootte willen wijzigen JPEG's zijn, gebruiken we de imagecreatefromjpeg () functie om ze in het script te laden. De Schaal afbeelding () De functie wordt dan gebruikt om de afbeelding in ons geval te verkleinen naar een specifieke breedte van 640 pixels. We hebben geen vaste hoogte opgegeven, dus de hoogte wordt automatisch berekend.

Elk van de originele afbeeldingsbestanden had -1920x1080 toegevoegd aan de bestandsnaam om de afmetingen aan te geven. We gebruiken str_replace () op de originele bestandsnaam en vervang -1920X1080 met de nieuwe afbeeldingsgrootte.

Ten slotte bewaren we de afbeeldingen waarvan de grootte is gewijzigd in een map met de naam resized met de nieuwe bestandsnamen. U kunt ook een derde parameter doorgeven aan de imagejpeg () functie om de kwaliteit van het opgeslagen afbeeldingsbestand in te stellen. Als de derde parameter wordt weggelaten, worden de afbeeldingen opgeslagen met een standaardkwaliteit van 75.

Pas grijstinten- en contrastfilters toe op elke afbeelding in een map

Deze keer zullen we twee verschillende filters toepassen op elke afbeelding in onze map en het eindresultaat in een andere map opslaan zonder de bestandsnaam te wijzigen. Laten we in de code duiken, en ik zal uitleggen wat elke functie later doet.

$ directory = 'Natuur /'; $ images = glob ($ directory. "*. jpg"); foreach ($ images as $ image) $ im_php = imagecreatefromjpeg ($ afbeelding); afbeeldingsfilter ($ im_php, IMG_FILTER_GRAYSCALE); afbeeldingsfilter ($ im_php, IMG_FILTER_CONTRAST, -25); $ new_name = basenaam ($ afbeelding); imagejpeg ($ im_php, $ directory.'Grayscale /'.$ nieuwe_naam); 

Zoals je kunt zien, laden we de afbeeldingen van de Natuur directory precies zoals bij het vorige voorbeeld. We zullen echter de ImageFilter () functioneer deze keer om filters toe te passen op de geladen afbeeldingsbron. 

Let erop dat ImageFilter () wijzigt de originele afbeelding en retourneert TRUE of VALSE gebaseerd op het succes of falen van de operatie. Dit is anders dan de Schaal afbeelding () functie die we in de vorige sectie hebben gebruikt, die de geschaalde afbeeldingsresource retourneerde.

Een ander belangrijk ding om in gedachten te houden is dat het contrastfilter waarden accepteert van -100 tot 100. Negatieve waarden impliceren meer contrast en positieve waarden betekenen minder contrast. Dit is het tegenovergestelde van wat sommige mensen zouden verwachten! Een waarde van 0 zal het beeld ongewijzigd laten.

Het helderheidsfilter heeft daarentegen minimum- en maximumlimieten van -255 en 255. De negatieve waarde in dit geval impliceert minimale helderheid en de positieve waarde impliceert maximale helderheid.

We krijgen de bestandsnaam van het bestandspad met behulp van de basename () functie en sla de afbeelding op met behulp van de imagejpeg () functie.

Laatste gedachten

Het doel van deze zelfstudie was om u vertrouwd te maken met de GD-bibliotheek in PHP en om u te laten zien hoe u al deze functies kunt gebruiken om uw leven gemakkelijker te maken. U kunt de voorbeelden aan het einde van de zelfstudie gebruiken als een gids om uw eigen script voor beeldmanipulatie te schrijven. U kunt de grootte van een afbeelding bijvoorbeeld alleen wijzigen als deze breder is dan een bepaalde limiet door de breedte te bepalen met behulp van de imagesx () functie.

Al deze functies bieden veel mogelijkheden om het manipuleren van afbeeldingen gemakkelijker te maken en u uiteindelijk veel tijd te besparen. Als je nog vragen hebt over deze tutorial, laat het me dan weten in de comments.