Come creare miniature multiple durante il caricamento dell'immagine?

Obiettivi del blog

Dopo aver letto questo blog saremo in grado di creare miniature multiple durante il caricamento di un'immagine. In questo blog possiamo imparare come ridimensionare la dimensione dell'immagine usando il codice.

Conosciamo le miniature

Le miniature sono le versioni di dimensioni ridotte di immagini o video. Le miniature vengono create dall'immagine originale riducendo le loro dimensioni e dimensioni. Creando miniature, possiamo rappresentare un'immagine di grandi dimensioni con un'immagine di dimensioni ridotte. Il sito web come i negozi di e-commerce online utilizza immagini in miniatura invece di immagini di grandi dimensioni per ridurre i tempi di caricamento della loro pagina web che rendono anche il sito più veloce. Per capire tecnicamente il funzionamento delle miniature faremo un semplice programma. Il requisito è stato condiviso di seguito:

Requisito

Capiamo prima il requisito. Diciamo che abbiamo un sito web chiamato Knowband che vende i moduli per la piattaforma di e-commerce come Magento, Prestashop, Opencart ecc. Mostra così tante immagini sulla pagina di elenco dei moduli di Knowband. Le immagini originali sono di grandi dimensioni in modo da aumentare direttamente il tempo di caricamento della pagina di elenco in modo da ridurre il tempo di caricamento della pagina. Il sito Knowband utilizza le immagini di anteprima nella pagina di elenco. In questo blog, possiamo imparare come creare più miniature di un'immagine. Consideriamo un esempio, dove creeremo tre miniature come mostrato nell'immagine qui sotto:

miniature

Funzione per creare l'anteprima

Comprendiamo la funzionalità o il codice principale che è effettivamente responsabile della creazione delle miniature. Di seguito viene fornita una funzione che è responsabile della creazione dell'anteprima. Lascia capire la funzione su come ha funzionato.

Sotto la funzione sono presenti i parametri 4

Di seguito è riportato il codice di creazione di miniature multiple durante il caricamento di un'immagine:

  • $ Source_path: Questo contiene il percorso dell'immagine originale.
  • $ Percorso_destinazione: Questo contiene il percorso della miniatura che verrà creata.
  • $ FILE_TYPE: Questo contiene l'estensione dell'immagine ad es. Jpg, png ecc.
  • $ Thumb_width: È la larghezza dell'immagine di anteprima richiesta.
  • $ Thumb_height: È l'altezza dell'immagine di anteprima richiesta.

Questa funzione preleva semplicemente l'immagine dal file sorgente e dopo aver convalidato l'immagine crea l'anteprima di larghezza e altezza. Quindi per creare le anteprime dei numeri 'n' dobbiamo chiamare questa funzione 'n' numero di volte con la larghezza e l'altezza richieste della miniatura. Questa funzione restituirà TRUE se l'anteprima è stata creata con successo altrimenti restituirà FALSE.

funzione create_thumbnail ($ percorso_destinazione, $ percorso_destinazione, $ tipo_file, $ thumb_width, $ thumb_height) {// Controllo del tipo di file. 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); } // ottiene la larghezza dell'immagine originale $ width = imagesx ($ source); // ottiene l'altezza dell'immagine originale $ height = imagesy ($ source); // Crea un'immagine nera della dimensione dell'immagine del pollice $ thumb_image = imagecreatetruecolor ($ thumb_width, $ thumb_height); // Copia e ridimensiona parte di un'immagine originale e ricampionata nell'immagine del pollice per creare un'immagine di dimensioni ridotte dell'immagine originale imagecopyresampled ($ thumb_image, $ source, 0, 0, 0, 0, $ thumb_width, $ thumb_height, $ width $ altezza); // crea un file JPEG dall'immagine specificata e lo salva nella cartella di destinazione. if (imagejpeg ($ thumb_image, $ target_path, 90)) {// distruggi le immagini per liberare la memoria associata a loro imagedestroy ($ thumb_image); imagedestroy ($ fonte); return TRUE; } else {return FALSE; }}

Clicca qui per scaricare il progetto completo.

sommario

Dopo aver letto questo documento puoi provare lo stesso codice sul tuo sistema. Dopo aver fatto lo stesso, puoi facilmente sapere come funzionano le miniature.


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 *