Como criar várias miniaturas ao carregar a imagem?

Objetivos do blog

Depois de ler este blog, poderemos criar várias miniaturas enquanto carregamos uma imagem. Neste blog podemos aprender como redimensionar o tamanho da imagem usando o código.

Vamos conhecer as miniaturas

Miniaturas são as versões de tamanho reduzido de fotos ou vídeos. Miniaturas são criadas a partir da imagem original, reduzindo sua dimensão e tamanho. Criando miniaturas, podemos representar uma imagem de tamanho grande por uma imagem pequena. O site, como lojas de comércio eletrônico on-line, usa imagens em miniatura em vez de imagens grandes para reduzir o tempo de carregamento de sua página da Web, o que também torna o site mais rápido. Para entender tecnicamente o funcionamento das miniaturas, vamos fazer um programa simples. O requisito foi compartilhado abaixo:

Exigência

Vamos entender o requisito primeiro. Digamos que temos um site chamado Knowband, que vende os módulos para a plataforma de e-commerce, como Magento, Prestashop, Opencart etc. Ele mostra tantas imagens na página de listagem dos módulos da Knowband. As imagens originais são de tamanho grande, o que aumenta diretamente o tempo de carregamento da página de listagem, de modo a reduzir o tempo de carregamento da página. O site da Knowband usa imagens em miniatura na página de listagem. Neste blog, podemos aprender a criar várias miniaturas de uma imagem. Vamos considerar um exemplo, onde vamos criar três miniaturas, como mostrado na imagem abaixo:

thumbnails

Função para criar a miniatura

Vamos entender a funcionalidade principal ou código que é realmente responsável por criar as miniaturas. Uma função é dada abaixo, que é responsável pela criação da miniatura. Vamos entender a função como ela realmente funcionou.

Abaixo da função tem parâmetros 4

O código de criação de várias miniaturas durante o upload de uma imagem é fornecido abaixo:

  • $ source_path: Este contém o caminho da imagem original.
  • $ target_path: Contém o caminho da miniatura que será criada.
  • $ file_type: Este contém a extensão da imagem, por exemplo, jpg, png etc.
  • $ thumb_width: É a largura da imagem em miniatura necessária.
  • $ thumb_height: É a altura da imagem em miniatura necessária.

Essa função simplesmente busca a imagem do arquivo de origem e, depois de validar a imagem, cria a miniatura de largura e altura especificadas. Então, para criar as miniaturas do número 'n', temos que chamar essa função 'n' número de vezes com a largura e a altura necessárias da miniatura. Esta função retornará TRUE se a miniatura for criada com sucesso, senão retornará FALSE.

function create_thumbnail ($ source_path, $ target_path, $ file_type, $ thumb_width, $ thumb_height) {// Verificando o tipo de arquivo. if ($ file_type == 'jpeg' || $ file_type == 'jpg') {$ fonte = imagecreatefromjpeg ($ source_path); } else if ($ file_type == 'png') {$ fonte = imagecreatefrompng ($ source_path); } else if ($ file_type == 'gif') {$ fonte = imagecreatefromgif ($ source_path); } // obtém a largura da imagem original $ width = imagesx ($ source); // obtém a altura da imagem original $ height = imagesy ($ source); // Crie uma imagem em preto do tamanho da imagem do polegar $ thumb_image = imagecreatetruecolor ($ thumb_width, $ thumb_height); // Copie e redimensione parte de uma imagem original e faça uma nova amostragem na imagem miniatura para criar uma imagem de tamanho reduzido da imagem original imagecopyresampled ($ thumb_image, $ source, 0, 0, 0, $ thumb_width, $ thumb_height, $ width , $ height); // cria um arquivo JPEG da imagem especificada e salva-o na pasta de destino. if (imagejpeg ($ thumb_image, $ target_path, 0)) {// destruir as imagens para libertar a memória associada a elas imagedestroy ($ thumb_image); imagedestroy ($ source); retorno verdadeiro; } mais {return FALSE; }}

Clique aqui para baixar o projeto completo.

Resumo

Depois de ler este documento, você pode tentar o mesmo código no seu sistema. Depois de fazer o mesmo, você pode facilmente saber como as miniaturas funcionam.


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 *