Wie erstelle ich mehrere Thumbnails beim Hochladen eines Bildes?

Ziele des Blogs

Nach dem Lesen dieses Blogs können wir beim Hochladen eines Bildes mehrere Miniaturansichten erstellen. In diesem Blog erfahren Sie, wie Sie die Größe des Bildes mithilfe von Code ändern können.

Lassen Sie uns über die Miniaturbilder wissen

Miniaturansichten sind verkleinerte Versionen von Bildern oder Videos. Miniaturansichten werden aus dem Originalbild erstellt, indem deren Größe und Größe verringert wird. Durch das Erstellen von Miniaturansichten können wir ein großes Bild durch ein kleines Bild darstellen. Die Website, z. B. Online-E-Commerce-Geschäfte, verwendet Miniaturbilder anstelle von großen Bildern, um die Ladezeit ihrer Webseite zu reduzieren, wodurch die Website auch schneller wird. Um die Funktionsweise der Miniaturbilder technisch zu verstehen, erstellen wir ein einfaches Programm. Die Anforderung wurde unten geteilt:

Anforderung

Verstehen wir zuerst die Anforderung. Nehmen wir an, wir haben eine Website namens Knowband, die die Module für die E-Commerce-Plattform wie Magento, Prestashop, Opencart usw. verkauft. Sie zeigt so viele Bilder auf der Auflistungsseite der Knowband-Module. Die Originalbilder sind groß, sodass die Ladezeit der Auflistungsseite direkt erhöht wird, um die Ladezeit der Seite zu reduzieren. Die Knowband-Site verwendet Miniaturbilder auf der Auflistungsseite. In diesem Blog erfahren Sie, wie Sie mehrere Miniaturansichten eines Bildes erstellen. Betrachten wir ein Beispiel, in dem wir drei Miniaturen erstellen, wie in der folgenden Abbildung gezeigt:

Thumbnails

Funktion zum Erstellen der Miniaturansicht

Verstehen wir die Hauptfunktionen oder den Code, der eigentlich für die Erstellung der Miniaturbilder verantwortlich ist. Nachfolgend wird eine Funktion angegeben, die für die Erstellung der Miniatur verantwortlich ist. Lassen Sie die Funktion verstehen, wie sie tatsächlich funktioniert hat.

Unter der Funktion haben 4-Parameter

Nachfolgend finden Sie den Code zum Erstellen mehrerer Thumbnails während des Hochladens eines Bildes:

  • $ source_path: Dieser enthält den Pfad des Originalbildes.
  • $ target_path: Dieser enthält den Pfad der Miniaturansicht, die erstellt wird.
  • $ file_type: Diese enthält die Bilderweiterung zB jpg, png etc.
  • $ thumb_width: Dies ist die Breite des erforderlichen Miniaturbilds.
  • $ thumb_height: Dies ist die Höhe des erforderlichen Miniaturbilds.

Diese Funktion ruft einfach das Bild aus der Quelldatei ab und erstellt nach Überprüfung des Bildes die Miniaturansicht der angegebenen Breite und Höhe. Um die Miniaturansichten für die Anzahl n zu erstellen, müssen wir diese Funktion mit der erforderlichen Breite und Höhe der Miniaturansicht n-mal nennen. Diese Funktion gibt TRUE zurück, wenn das Thumbnail erfolgreich erstellt wurde. Andernfalls wird FALSE zurückgegeben.

Funktion create_thumbnail ($ source_path, $ target_path, $ file_type, $ thumb_width, $ thumb_height) {// Überprüfung des Dateityps. if ($ file_type == 'jpeg' || $ file_type == 'jpg') {$ source = imagecreatefromjpeg ($ source_path); } else if ($ file_type == 'png') {$ source = imagecreatefrompng ($ source_path); } else if ($ file_type == 'gif') {$ source = imagecreatefromgif ($ source_path); } // Erhalte die Breite des Originalbildes $ width = imagesx ($ source); // Ermittle die Höhe des Originalbildes $ height = imagesy ($ source); // Ein schwarzes Bild mit der Daumengröße erstellen. $ Thumb_image = imagecreatetruecolor ($ thumb_width, $ thumb_height); // Es kopiert einen Teil eines Originalbildes und ändert dessen Größe in einem Miniaturbild, sodass ein verkleinertes Bild des Originalbildes erstellt wird ($ thumb_image, $ source, 0, 0, 0, 0, $ thumb_width, $ thumb_height, $ width) $ Höhe); // erstellt eine JPEG-Datei aus dem angegebenen Bild und speichert sie im Zielordner. if (imagejpeg ($ thumb_image, $ target_path, 90)) {// Zerstöre die Bilder, um den ihnen zugeordneten Speicher freizugeben. imageedestroy ($ thumb_image); Imagedestroy ($ source); return TRUE; } else {return FALSE; }}

Klicken Sie hier, um das gesamte Projekt herunterzuladen.

Zusammenfassung

Nachdem Sie dieses Dokument gelesen haben, können Sie denselben Code auf Ihrem System ausprobieren. Nachdem Sie das gleiche getan haben, können Sie leicht wissen, wie die Miniaturbilder funktionieren.


Shivam Verma

Shivam Verma

Shivam Verma is an experienced software engineer in PHP development and Database design. His area of interest is website development. He likes to be aware of his surroundings and to learn new things by observing others. He believes that by doing this we can learn new things and can also enhance our knowledge everyday. He has started writing technical blogs with a view to help others in studying and learning new things in an easy way.

Leave a Reply

Your email address will not be published. Required fields are marked *