Objectifs du blog
Après avoir lu ce blog, nous pourrons créer plusieurs miniatures lors du téléchargement d’une image. Dans ce blog, nous pouvons apprendre à redimensionner la taille de l'image à l'aide de code.
Connaissons les vignettes
Les miniatures sont les versions réduites d'images ou de vidéos. Les miniatures sont créées à partir de l'image d'origine en réduisant leurs dimensions et leur taille. En créant des vignettes, nous pouvons représenter une image de grande taille par une image de petite taille. Les sites Web tels que les magasins de commerce électronique en ligne utilisent des images miniatures au lieu d’images volumineuses pour réduire le temps de chargement de leur page Web, ce qui accélère également le fonctionnement du site. Pour comprendre techniquement le fonctionnement des vignettes, nous allons créer un programme simple. Le besoin a été partagé ci-dessous:
Exigence
Comprenons d'abord l'exigence. Supposons qu'un site Web nommé Knowband vend les modules de la plate-forme de commerce électronique tels que Magento, Prestashop, Opencart, etc. Il affiche de nombreuses images sur la page de liste des modules de Knowband. Les images d'origine sont de grande taille, ce qui augmente directement le temps de chargement de la page de liste. Par conséquent, pour réduire le temps de chargement de la page, le site Knowband utilise des images miniatures sur la page de liste. Dans ce blog, nous pouvons apprendre à créer plusieurs vignettes d’une image. Prenons un exemple dans lequel nous allons créer trois vignettes comme indiqué dans l'image ci-dessous:
Fonction pour créer la miniature
Comprenons la fonctionnalité principale ou le code qui est en réalité responsable de la création des vignettes. Une fonction est donnée ci-dessous qui est responsable de la création de la vignette. Laissons comprendre la fonction comment cela a réellement fonctionné.
La fonction ci-dessous a des paramètres 4
Le code de création de plusieurs vignettes lors du téléchargement d'une image est donné ci-dessous:
- $ chemin_source: Ceci contient le chemin de l'image originale.
- $ target_path: Celui-ci contient le chemin de la vignette qui sera créée.
- $ type_fichier: Ceci contient l'extension de l'image, par exemple, jpg, png, etc.
- $ thumb_width: C'est la largeur de la vignette requise.
- $ thumb_height: C'est la hauteur de la vignette requise.
Cette fonction récupère simplement l'image du fichier source et, après avoir validé l'image, crée la vignette de largeur et hauteur données. Donc, pour créer les vignettes avec le nombre 'n', nous devons appeler cette fonction 'n' nombre de fois avec la largeur et la hauteur requises pour la vignette. Cette fonction retournera TRUE si la vignette créée avec succès sinon elle retournera FALSE.
function create_thumbnail ($ chemin_source, $ chemin_cible, $ type_fichier, $ pouce_width, $ pouce_height) {// Vérification du type de fichier. if ($ file_type == 'jpeg' || $ file_type == 'jpg') {$ source = imagecreatefromjpeg ($ source_path); } else if ($ file_type == 'png') {$ source = imagecreatefrompng ($ chemin_source); } else if ($ file_type == 'gif') {$ source = imagecreatefromgif ($ chemin_source); } // récupère la largeur de l'image d'origine $ width = imagesx ($ source); // récupère la hauteur de l'image d'origine $ height = imagesy ($ source); // Crée une image en noir de la taille de l'image miniature $ thumb_image = imagecreatetruecolor ($ thumb_width, $ thumb_height); // Il copie et redimensionne une partie d'une image d'origine et ré-échantillonné dans une image miniature pour créer une image de taille réduite de l'image d'origine imagecopyresampled ($ thumb_image, $ source, 0, 0, 0, $ thumb_width, $ thumb_height, $ width , $ hauteur); // crée un fichier JPEG à partir de l'image donnée et l'enregistre dans le dossier ciblé. if (imagejpeg ($ thumb_image, $ target_path, 0)) {// détruit les images pour libérer la mémoire qui leur est associée. imagedestroy ($ thumb_image); imagedestroy ($ source); renvoyer VRAI; } else {return FALSE; }}
Cliquez ici pour télécharger le projet complet.
Résumé
Après avoir lu ce document, vous pouvez essayer le même code sur votre système. Après avoir fait la même chose, vous pouvez facilement savoir comment fonctionnent les vignettes.