Bildgrößenanpassung leicht gemacht mit PHP

Wollten Sie schon immer nach einer universellen, benutzerfreundlichen Methode zur Größenänderung Ihrer Bilder in PHP? Nun, dafür sind PHP-Klassen - wiederverwendbare Funktionen, die wir für die Drecksarbeit hinter den Kulissen aufrufen. Wir werden lernen, wie man eine eigene Klasse erstellt, die sowohl gut als auch erweiterbar ist. Die Größenänderung sollte einfach sein. Wie einfach? Wie wäre es mit drei Schritten!

Premium-Bildanpassungsskripts

Bevor wir in den schrittweisen Prozess einsteigen, sehen wir uns einige Premium-Optionen von CodeCanyon an. Es gibt Dutzende von Skripten und Plugins zur Bildgrößenanpassung, aus denen Sie wählen können - hier einige Beispiele.

1. Image Resizer und Thumbnail Creator

Dies ist eine einfache PHP-Klasse, mit der Bilder schnell angepasst werden können. Wenn Sie einen PHP-fähigen Webserver verwenden und über einen beliebigen Bildbetrachter verfügen, ist dieses Skript ideal für Sie. Es behält immer das Seitenverhältnis bei, sodass das verkleinerte Bild seine Form behält.

Image Resizer und Thumbnail Creator

2. anySize - Bildgrößenänderung im Cache

anySize ist ein leichtes, vollständig automatisiertes Caching-Skript zum Erstellen von Kaffee, Kaffee und Servieren, das das Anfordern und Generieren von Bildern (jpg, gif oder png) jeder Größe ermöglicht.

anySize - Zwischenspeicherung von Bildern

3. Größe des Magento-Bilds

Mit diesem Magento-Plugin können Sie die maximale Bildbreite und -höhe einstellen, die für das Katalogbild hochgeladen werden kann. Dadurch wird auch die Dateigröße des Katalogbilds reduziert. Dadurch können Sie den Speicherplatz auf der Festplatte reduzieren, da die Größe und Größe der Bilder geändert und komprimiert wird.

Magento Image Größe ändern

4. Image Resizer und Wasserzeichenhersteller

Diese PHP-Klasse hilft Ihnen bei der Größenänderung von Fotos und beim Erstellen Ihres persönlichen Wasserzeichens.

Image Resizer und Wasserzeichenhersteller

5. RezImage - Einfache Größenanpassung von Bildern

RezImage ist ein einfaches und flexibles Werkzeug zum Ändern der Größe von Bildern, das sich ideal für Webdesigner oder Besitzer von Online-Shops eignet. Mit diesem Tool können Sie die Größe eines gesamten Ordners mit Bildern ändern, egal wie viele vorhanden sind. Laden Sie einfach den Ordner mit den Bildern, legen Sie die Breite und Höhe fest und nichts mehr. Enthält einige Voreinstellungen für die Auflösung wie VGA, HD, QXGA, QSXGA usw., Sie können jedoch auch eigene Voreinstellungen vornehmen.

RezImage - Einfache Größenanpassung von Bildern

Einführung

Um Ihnen einen schnellen Einblick zu geben, was wir mit unserer Klasse erreichen möchten, sollte die Klasse Folgendes sein:

  • Einfach zu verwenden
  • Format unabhängig. Öffnen Sie, ändern Sie die Größe und speichern Sie verschiedene Bildformate.
  • Intelligente Größenanpassung - Keine Bildverzerrung!

Hinweis: Dies ist kein Lernprogramm zum Erstellen von Klassen und Objekten. Obwohl diese Fertigkeit hilfreich wäre, ist es nicht erforderlich, um dieses Lernprogramm zu befolgen.

Es gibt viel zu berichten - fangen wir an.


Schritt 1 Vorbereitung

Wir fangen einfach an. Erstellen Sie in Ihrem Arbeitsverzeichnis zwei Dateien: eine namens index.php, die andere resize-class.php


Schritt 2 Objekt aufrufen

Um Ihnen eine Vorstellung davon zu vermitteln, was wir zu erreichen versuchen, werden zunächst die Aufrufe codiert, mit denen wir die Größe der Bilder ändern. Öffnen Sie Ihre index.php-Datei und fügen Sie den folgenden Code hinzu.

Wie Sie sehen, gibt es eine nette Logik für das, was wir tun. Wir öffnen die Bilddatei, legen die Abmessungen fest, auf die das Bild verkleinert werden soll, sowie die Art der Größenänderung.
Dann speichern wir das Bild und wählen das gewünschte Bildformat sowie die Bildqualität. Speichern und schließen Sie die Datei index.php.

 // *** Include die Klasse include ("resize-class.php"); // *** 1) Bild initialisieren / laden $ resizeObj = neue Größe ('sample.jpg'); // *** 2) Bildgröße ändern (Optionen: genau, Hochformat, Querformat, Auto, Zuschneiden) $ resizeObj -> resizeImage (150, 100, 'crop'); // *** 3) Bild speichern $ resizeObj -> saveImage ('sample-resized.gif', 100);

Aus dem obigen Code können Sie sehen, dass wir eine JPG-Datei öffnen, aber ein GIF speichern. Denken Sie daran, es geht um Flexibilität.


Schritt 3 Klassenskelett

Objektorientierte Programmierung (OOP) macht dieses Gefühl von Leichtigkeit möglich. Denken Sie an eine Klasse wie ein Muster. Sie können die Daten kapseln - ein weiterer Fachbegriff, der eigentlich nur bedeutet, die Daten zu verbergen. Wir können diese Klasse dann immer wieder verwenden, ohne dass Sie den Code zur Größenänderung neu schreiben müssen. Sie müssen nur die entsprechenden Methoden aufrufen, genau wie in Schritt zwei. Sobald unser Muster erstellt wurde, erstellen wir Instanzen dieses Musters, die als Objekte bezeichnet werden.

"Die Konstruktfunktion, die als Konstruktor bezeichnet wird, ist eine spezielle Klassenmethode, die von der Klasse aufgerufen wird, wenn Sie ein neues Objekt erstellen."

Beginnen wir mit dem Erstellen unserer Größenklasse. Öffnen Sie Ihre resize-class.php-Datei. Nachfolgend finden Sie eine grundlegende Skelettstruktur der Klasse, die ich als "Größe ändern" bezeichnet habe. Beachten Sie die Kommentarzeile der Klassenvariablen. Hier fügen wir später unsere wichtigen Klassenvariablen hinzu.

Die Konstruktfunktion, die als Konstruktor bezeichnet wird, ist eine spezielle Klassenmethode (der Begriff "Methode" ist derselbe wie die Funktion. Wenn Sie jedoch von Klassen und Objekten sprechen, wird der Begriff Methode häufig verwendet), die von der Klasse beim Erstellen aufgerufen wird ein neues Objekt Dies macht es für uns geeignet, einige Initialisierungen vorzunehmen - was wir im nächsten Schritt tun werden.

 Klassengröße ändern // *** Klassenvariablen public function __construct () 

Beachten Sie, das ist ein doppelt Unterstrich für die Konstruktmethode.


Schritt 4 Der Konstruktor

Wir werden die Konstruktormethode oben ändern. Zuerst übergeben wir den Dateinamen (und Pfad) unseres Bildes, um die Größe zu ändern. Wir nennen diese Variable $ fileName.

Wir müssen die mit PHP übergebene Datei (genauer die PHP-GD-Bibliothek) öffnen, damit PHP das Bild lesen kann. Wir machen dies mit der benutzerdefinierten Methode 'openImage'. Ich werde wie diese Methode erfahren
funktioniert sofort, aber vorerst müssen wir das Ergebnis als Klassenvariable speichern. Eine Klassenvariable ist nur eine Variable - aber sie ist spezifisch für diese Klasse. Erinnern Sie sich an den Kommentar der Klassenvariablen, den ich zuvor erwähnt habe? Fügen Sie "image" als private Variable hinzu, indem Sie "private $ image;" eingeben. Wenn Sie die Variable als 'Privat' festlegen, legen Sie den Gültigkeitsbereich dieser Variablen fest, sodass nur auf die Klasse zugegriffen werden kann. Von nun an können wir unser geöffnetes Image aufrufen, das als Ressource bezeichnet wird, was wir später tun werden, wenn wir die Größe ändern.

Wenn wir gerade dabei sind, speichern wir die Höhe und Breite des Bildes. Ich habe das Gefühl, dass diese später nützlich sein werden.

Sie sollten jetzt folgendes haben.

 Größenänderung der Klasse // *** Klassenvariablen private $ image; private $ width; private $ height; Funktion __construct ($ fileName) // *** Öffnen Sie die Datei $ this-> image = $ this-> openImage ($ fileName); // *** Breite und Höhe abrufen $ this-> width = imagesx ($ this-> image); $ this-> height = imagesy ($ this-> image); 

Die Methoden imagesx und imagesy sind in Funktionen integriert, die Bestandteil der GD-Bibliothek sind. Sie rufen jeweils die Breite und Höhe Ihres Bildes ab.


Schritt 5 Öffnen des Bildes

Im vorherigen Schritt rufen wir die benutzerdefinierte Methode openImage auf. In diesem Schritt erstellen wir diese Methode. Wir möchten, dass das Skript für uns denkt, dass das Skript abhängig davon, welcher Dateityp übergeben wird, bestimmt, welche GD-Bibliotheksfunktion zum Öffnen des Bildes aufgerufen wird. Dies wird leicht durch den Vergleich der Dateierweiterung mit einer switch-Anweisung erreicht.

Wir übergeben in unserer Datei die Größe der Datei und geben sie zurück.

 private Funktion openImage ($ file) // *** Erweiterung holen $ extension = strtolower (strrchr ($ file, '.')); switch ($ extension) case '.jpg': case '.jpeg': $ img = @imagecreatefromjpeg ($ file); brechen; case '.gif': $ img = @imagecreatefromgif ($ file); brechen; case '.png': $ img = @imagecreatefrompng ($ file); brechen; Voreinstellung: $ img = false; brechen;  return $ img; 

Schritt 6 Ändern der Größe

Hier geschieht die Liebe. Dieser Schritt ist wirklich nur eine Erklärung für das, was wir tun werden - also keine Hausaufgaben. Im nächsten Schritt erstellen wir eine öffentliche Methode, die wir zur Größenänderung verwenden werden. Daher ist es sinnvoll, Breite und Höhe sowie Informationen darüber, wie wir die Größe des Bildes ändern möchten, zu übergeben. Lass uns einen Moment darüber sprechen. Es gibt Szenarien, in denen Sie ein Bild auf eine exakte Größe skalieren möchten. Großartig, lass uns das einbinden. Es gibt jedoch auch Zeiten, in denen Sie Hunderte von Bildern ändern müssen und jedes Bild ein anderes Seitenverhältnis hat - denken Sie Hochformatbilder. Wenn Sie diese Größe auf eine exakte Größe ändern, wird dies zu erheblichen Verzerrungen führen. Wenn wir unsere Optionen zur Vermeidung von Verzerrungen betrachten, können wir:

  1. Verändern Sie die Größe des Bildes so nahe wie möglich an unsere neuen Bildmaße und behalten Sie dabei das Seitenverhältnis bei.
  2. Verändern Sie die Größe des Bildes so nahe wie möglich an unsere neuen Bildmaße und beschneiden Sie den Rest.

Beide Optionen sind abhängig von Ihren Anforderungen möglich.

Ja. Wir werden versuchen, alle oben genannten Punkte zu behandeln. Um es zusammenzufassen, bieten wir Ihnen folgende Optionen an:

  1. Größe nach exakter Breite / Höhe ändern. (genau)
  2. Größe nach Breite anpassen - die exakte Breite wird eingestellt, die Höhe wird entsprechend dem Seitenverhältnis angepasst. (Landschaft)
  3. Größe ändern - wie Größe ändern, aber die Höhe wird eingestellt und die Breite wird dynamisch angepasst. (Porträt)
  4. Automatisches Ermitteln der Optionen 2 und 3. Wenn Sie einen Ordner mit Fotos unterschiedlicher Größe durchlaufen, lassen Sie das Skript festlegen, wie dies behandelt werden soll. (Auto)
  5. Größe ändern und dann zuschneiden. Das ist mein Favorit. Genaue Größe, keine Verzerrung. (Ernte)

Schritt 7 Ändern der Größe. Machen wir das!

Die Resize-Methode besteht aus zwei Teilen. Die erste besteht darin, die optimale Breite und Höhe für unser neues Image zu erhalten, indem einige benutzerdefinierte Methoden erstellt werden - und natürlich die oben beschriebene Option zur Größenänderung. Die Breite und Höhe werden als Array zurückgegeben und auf ihre jeweiligen Variablen festgelegt. Fühlen Sie sich frei, als Referenz weiterzugeben - aber ich bin kein großer Fan davon.

Der zweite Teil führt die tatsächliche Größenänderung durch. Um diese Größe des Lernprogramms gering zu halten, lasse ich Sie die folgenden GD-Funktionen nachlesen:

  • imagecreatetruecolor
  • imagecopyresampled.

Wir speichern auch die Ausgabe der imagecreatetruecolor-Methode (ein neues Echtfarbenbild) als Klassenvariable. Fügen Sie "private $ imageResized;" hinzu. mit Ihren anderen Klassenvariablen.

Die Größenänderung wird von einem PHP-Modul durchgeführt, das als GD-Bibliothek bezeichnet wird. Viele der von uns verwendeten Methoden werden von dieser Bibliothek bereitgestellt.

 // *** Zu Klassenvariablen hinzufügen private $ imageResized;
 öffentliche Funktion resizeImage ($ newWidth, $ newHeight, $ option = "auto") // *** Optimale Breite und Höhe erhalten - basierend auf $ option $ optionArray = $ this-> getDimensions ($ newWidth, $ newHeight, strtolower ( $ Option)); $ optimalWidth = $ optionArray ['optimalWidth']; $ optimalHeight = $ optionArray ['optimalHeight']; // *** Resample - Bildleinwand der Größe x, y erstellen $ this-> imageResized = imagecreatetruecolor ($ optimalWidth, $ optimalHeight); imagecopyresampled ($ this-> imageResized, $ this-> image, 0, 0, 0, 0, $ optimalWidth, $ optimalHeight, $ this-> width, $ this-> height); // *** Wenn die Option 'crop' ist, dann auch crop. if ($ option == 'crop') $ this-> crop ($ optimalWidth, $ optimalHeight, $ newWidth, $ newHeight); 

Schritt 8 Der Entscheidungsbaum

Je mehr Arbeit Sie jetzt erledigen, desto weniger müssen Sie bei der Größenänderung erledigen. Diese Methode wählt die Route aus, die Sie nehmen müssen, mit dem Ziel, die optimale Breite und Höhe für die Größenänderung basierend auf Ihrer Größenänderungsoption zu ermitteln. Es wird die entsprechende Methode aufgerufen, die wir im nächsten Schritt erstellen werden.

 private Funktion getDimensions ($ newWidth, $ newHeight, $ -Option) switch ($ -Option) case 'exact': $ optimalWidth = $ newWidth; $ optimalHeight = $ newHeight; brechen; case 'portrait': $ optimalWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimalHeight = $ newHeight; brechen; Fall 'landscape': $ optimalWidth = $ newWidth; $ optimalHeight = $ this-> getSizeByFixedWidth ($ newWidth); brechen; case 'auto': $ optionArray = $ this-> getSizeByAuto ($ newWidth, $ newHeight); $ optimalWidth = $ optionArray ['optimalWidth']; $ optimalHeight = $ optionArray ['optimalHeight']; brechen; case 'crop': $ optionArray = $ this-> getOptimalCrop ($ newWidth, $ newHeight); $ optimalWidth = $ optionArray ['optimalWidth']; $ optimalHeight = $ optionArray ['optimalHeight']; brechen;  return array ('optimalWidth' => $ optimalWidth, 'optimalHeight' => $ optimalHeight); 

Schritt 9 Optimale Abmessungen

Wir haben bereits besprochen, was diese vier Methoden bewirken. Das sind wirklich nur grundlegende Mathematiken, die unsere beste Anpassung berechnen.

 private Funktion getSizeByFixedHeight ($ newHeight) $ ratio = $ this-> width / $ this-> height; $ newWidth = $ newHeight * $ ratio; return $ newWidth;  private Funktion getSizeByFixedWidth ($ newWidth) $ ratio = $ this-> height / $ this-> width; $ newHeight = $ newWidth * $ ratio; $ newHeight zurückgeben;  private Funktion getSizeByAuto ($ newWidth, $ newHeight) if ($ this-> height) < $this->width) // *** Das Bild, dessen Größe geändert werden soll, ist breiter (Querformat) $ optimalWidth = $ newWidth; $ optimalHeight = $ this-> getSizeByFixedWidth ($ newWidth);  elseif ($ this-> height> $ this-> width) // *** Das zu ändernde Bild ist größer (Hochformat) $ optimalWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimalHeight = $ newHeight;  else // *** Das neu zu löschende Bild ist ein Quadrat if ($ newHeight < $newWidth)  $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth ($ newWidth);  else if ($ newHeight> $ newWidth) $ optimalWidth = $ this-> getSizeByFixedHeight ($ newHeight); $ optimalHeight = $ newHeight;  else // *** Sqaure, dessen Größe in ein Quadrat geändert wird $ optimalWidth = $ newWidth; $ optimalHeight = $ newHeight;  return array ('optimalWidth' => $ optimalWidth, 'optimalHeight' => $ optimalHeight);  private Funktion getOptimalCrop ($ newWidth, $ newHeight) $ heightRatio = $ this-> height / $ newHeight; $ widthRatio = $ this-> width / $ newWidth; if ($ heightRatio < $widthRatio)  $optimalRatio = $heightRatio;  else  $optimalRatio = $widthRatio;  $optimalHeight = $this->height / $ optimalRatio; $ optimalWidth = $ this-> width / $ optimalRatio; Rückgabewert ('optimalWidth' => $ optimalWidth, 'optimalHeight' => $ optimalHeight); 

Schritt 10 Zuschneiden

Wenn Sie sich für einen Zuschnitt angemeldet haben - das heißt, Sie haben die Zuschneideoption verwendet, haben Sie einen weiteren kleinen Schritt. Wir beschneiden das Bild aus der
Center. Das Zuschneiden ist ein ähnlicher Vorgang wie das Ändern der Größe, jedoch werden einige Parameter zur Größenänderung übergeben.

 private function crop ($ optimalWidth, $ optimalHeight, $ newWidth, $ newHeight) // *** Find center - wird für das crop verwendet $ cropStartX = ($ optimalWidth / 2) - ($ newWidth / 2); $ cropStartY = ($ optimalHeight / 2) - ($ newHeight / 2); $ crop = $ this-> imageResized; // Imagedestroy ($ this-> imageResized); // *** Jetzt von der Mitte auf die gewünschte Größe zuschneiden $ this-> imageResized = imagecreatetruecolor ($ newWidth, $ newHeight); imagecopyresampled ($ this-> imageResized, $ crop, 0, 0, $ cropStartX, $ cropStartY, $ newWidth, $ newHeight, $ newWidth, $ newHeight); 

Schritt 11 Speichern Sie das Bild

Wir kommen dort hin; fast fertig. Es ist jetzt Zeit, das Bild zu speichern. Wir passieren den Pfad und die Bildqualität, die wir möchten, reicht von 0-100, wobei 100 die beste ist, und nennen wir die geeignete Methode. Ein paar Dinge zur Bildqualität: JPG verwendet eine Skala von 0-100, wobei 100 die beste ist. GIF-Bilder haben keine Bildqualitätseinstellung. PNGs tun dies, aber sie verwenden die Skala 0-9, wobei 0 die beste ist. Das ist nicht gut, da wir nicht erwarten können, dass wir uns jedes Mal daran erinnern, wenn wir ein Bild speichern möchten. Wir machen ein bisschen Magie, um alles zu standardisieren.

 public function saveImage ($ savePath, $ imageQuality = "100") // *** Erweiterung holen $ extension = strrchr ($ savePath, '.'); $ extension = strtolower ($ extension); switch ($ extension) case '.jpg': case '.jpeg': if (imagetypes () & IMG_JPG) imagejpeg ($ this-> imageResized, $ savePath, $ imageQuality);  brechen; case '.gif': if (imagetypes () & IMG_GIF) imagegif ($ this-> imageResized, $ savePath);  brechen; case '.png': // *** Skalenqualität von 0-100 bis 0-9 $ scaleQuality = round (($ imageQuality / 100) * 9); // *** Invertiere Qualitätseinstellung als 0 ist am besten, nicht 9 $ invertScaleQuality = 9 - $ scaleQuality; if (imagetypes () & IMG_PNG) imagepng ($ this-> imageResized, $ savePath, $ invertScaleQuality);  brechen; //… etc default: // *** Keine Erweiterung - Kein Speichern. brechen;  imagedestroy ($ this-> imageResized); 

Jetzt ist auch ein guter Zeitpunkt, um unsere Bildressource zu zerstören, um Speicherplatz zu schaffen. Wenn Sie dies in der Produktion verwenden, ist es möglicherweise eine gute Idee, das Ergebnis des gespeicherten Bildes zu erfassen und zurückzugeben.


Fazit

Nun, das ist es, Leute. Vielen Dank, dass Sie diesem Tutorial gefolgt sind. Ich hoffe, Sie finden es nützlich. Über Ihr Feedback würde ich mich über die folgenden Kommentare freuen.