¿Cómo crear múltiples miniaturas mientras se carga la imagen?

Objetivos del blog.

Después de leer este blog, podremos crear varias miniaturas mientras cargamos una imagen. En este blog podemos aprender a cambiar el tamaño del tamaño de la imagen usando código.

Vamos a conocer las miniaturas.

Las miniaturas son las versiones reducidas de imágenes o videos. Las miniaturas se crean a partir de la imagen original al reducir su dimensión y tamaño. Al crear miniaturas podemos representar una imagen de gran tamaño con una imagen de pequeño tamaño. El sitio web, como las tiendas de comercio electrónico en línea, usa imágenes en miniatura en lugar de imágenes grandes para reducir el tiempo de carga de su página web, lo que también hace que el sitio sea más rápido. Para entender el funcionamiento de las miniaturas técnicamente haremos un programa simple. El requisito se ha compartido a continuación:

Requisito

Entendamos el requisito primero. Digamos que tenemos un sitio web llamado Knowband que vende los módulos para la plataforma de comercio electrónico como Magento, Prestashop, Opencart, etc. Muestra muchas imágenes en la página de listado de módulos de Knowband. Las imágenes originales son de gran tamaño, por lo que aumenta directamente el tiempo de carga de la página de listado para reducir el tiempo de carga de la página. El sitio de Knowband utiliza imágenes en miniatura en la página de listado. En este blog, podemos aprender cómo crear múltiples miniaturas de una imagen. Consideremos un ejemplo, donde crearemos tres miniaturas como se muestra en la imagen que se muestra a continuación:

miniaturas

Función para crear la miniatura.

Entendamos la funcionalidad principal o el código que es realmente responsable de crear las miniaturas. A continuación se proporciona una función que es responsable de crear la miniatura. Vamos a entender la función como funcionó realmente.

Debajo de la función tenemos parámetros 4

El código de creación de varias miniaturas mientras se carga una imagen se muestra a continuación:

  • $ source_path: Esto contiene el camino de la imagen original.
  • $ target_path: Esto contiene la ruta de acceso de la miniatura que se creará.
  • $ tipo_de_archivo: Esto contiene la extensión de la imagen, por ejemplo, jpg, png, etc.
  • $ thumb_width: Es el ancho de la imagen en miniatura requerida.
  • $ thumb_height: Es la altura de la imagen en miniatura requerida.

Esta función simplemente recupera la imagen del archivo fuente y, después de validar la imagen, crea la miniatura del ancho y la altura dados. Así que para crear las miniaturas de números 'n' tenemos que llamar a esta función 'n' número de veces con el ancho y la altura requeridos de la miniatura. Esta función devolverá VERDADERO si la miniatura se creó correctamente, de lo contrario, devolverá FALSO.

function create_thumbnail ($ source_path, $ target_path, $ file_type, $ thumb_width, $ thumb_height) {// Comprobando el tipo de archivo. 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); } // obtener el ancho de la imagen original $ width = imagesx ($ source); // obtener la altura de la imagen original $ height = imagesy ($ source); // Crear una imagen en negro del tamaño de la imagen del pulgar $ thumb_image = imagecreatetruecolor ($ thumb_width, $ thumb_height); // Copia y redimensiona parte de una imagen original y vuelve a muestrearla en la imagen del pulgar para crear una imagen de tamaño reducido de la imagen original imagen muestreada ($ thumb_image, $ source, 0, 0, 0, 0, $ thumb_width, $ thumb_height, $ width , $ altura); // crea un archivo JPEG desde la imagen dada y lo guarda en la carpeta seleccionada. if (imagejpeg ($ thumb_image, $ target_path, 90)) {// destruye las imágenes para liberar la memoria asociada con ellas imagedestroy ($ thumb_image); imagedestroy ($ source); volver VERDADERO } else {return FALSE; }}

Haga clic aquí para descargar el proyecto completo..

Resumen

Después de leer este documento, puede probar el mismo código en su sistema. Después de hacer lo mismo, puedes saber fácilmente cómo funcionan las miniaturas.


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 *