Redimensionar una imagen de un Input File

Redimensionar una imagen de un Input File

Redimensionar una imagen de un Input File
Valora el contenido

¿Tienes un proyecto web con imagenes? ¿Los usuarios de tu proyecto pueden subir imagenes de sus equipos al servidor? Un problema bastante común es tratar con imagenes pesadas y los programadores tratamos de optimizar cada byte de recurso en nuestro sistema, hoy vamos a ver como redimensionar una imagen de un Input File con Javascript para convertir las imagenes excesivamente grandes de tus usuarios a imagenes a tamaño máximo.

En este blog somos fanaticos del tratamiento de imagenes, hemos hablado desde como tomar una foto con javascript hasta como hacer algunos efectos avanzados con opencv como detectar bordes con Canny.

Como te comente en la introducción de este post hoy vamos a redimensionar una imagen con javascript de forma que sin importar el tamaño de la imagen seleccionada el ancho o alto maximo de la imagen tu lo ordenes.

La imagen por supuesto será redimensada de forma proporcional y el tamaño máximo será dado por un valor fijado por ti, en este ejemplo redimensaremos cualquier imagen a un ancho o alto máximo de 800 pixeles.


Suscríbete!

Suscríbete a nuestra lista de correo y recíbe los últimos contenidos directamente en tu bandeja de correo electrónico, puedes elegir únicamente de que categoria del blog quieres recibir contenido.

Suscríbeme

Ademas de un elemento input type file también tendremos una imagen de tipo vista previa que nos permitirá conocer cual imagen estamos subiendo a nuestro proyecto.

redimensionar una imagen de un input file con javascript

Imagen seleccionada de 1680px X 1080px y convertida a 800px X 500px mostrada en un contenedor de 250px X 157px

Codigo HTML del Input File

En nuestro codigo HTML tenemos una imagen con un id y un input tipo file con un id similar (toma nota de estos ids) asi como un evento onchange para realizar una tarea al seleccionar una imagen.

Codigo Javascript del metodo revisarImagen

Antes que nada mencionar que este codigo es compatible con varios input file dentro de la misma pagina, es por esto que dentro de esta funcion no manejamos directamente los ids en especifico sino consideramos que cada nuevo elemento de imagen e input tendran ids del tipo imagenX_preview e imagenX respectivamente.

Se utiliza una arreglo llamado imagen para guardar el codigo base64 de cada nueva imagen seleccionada en su respectiva posicion, este codigo base64 tambien se coloca como vista previa en la respectiva imagen asociada al input file.

Este metodo se asegura de que la imagen seleccionada nunca sea mayor a 800px de ancho o a 800px de alto, es decir, si seleccionas una imagen grande de por ejemplo 1680px por 1080px entonces el resultado sería de 800px por 500px.

¿Lo que buscas es redimensar una imagen con php?

Espero y este codigo te sea de utilidad para redimensionar una imagen o varias en tus proyectos web, recuerda que si este post te fue de utilidad puedes compartirlo en tus redes sociales o dejarnos un comentario.

Hasta luego!

Redimensionar una imagen de un Input File
Valora el contenido

Dejar un comentario

Be the First to Comment!

avatar
  Subscribe  
Notify of