Hablamos sobre cómo validar dimensiones de imagen con JS para cuando el usuario sube una imagen y necesitamos validar que la imagen sea de cierto tamaño o al menos cierto tamaño de ancho y alto, te mostraremos un código para validar esto.

En algunos proyectos necesitamos que el usuario suba una imagen al servidor.

Además de lo obvio de validar el tamaño del archivo también necesitaremos validar otro punto importante, las dimensiones.

En ciertas circunstancias necesitamos que una imagen sea de al menos x pixeles de ancho o al menos y pixeles de alto.

Ya sea para compartir en redes sociales o para encajar correctamente en alguna funcionalidad especifica de calidad.

El día de hoy veremos cómo validar dimensiones de imagen con JavaScript de manera fácil y rápida.

Lo primero es crear un input tipo archivo que solo acepte imágenes.

Con esto ya tendremos nuestra primera restricción para imágenes, así de fácil y rápido con el atributo accept.

<img class="item-img" id="featuredPreview" src="{{ asset('images/preview-img-destacada.png') }}" />

<input type="file" accept="image/*" name="featured" id="featured">

Ahora vamos a convertirnos el elemento input con jQuery y registramos el evento change.

En este evento registramos el cambio de valor del input para detectar cuando el usuario seleccione una imagen a subir.

Posteriormente vamos a obtener el archivo y cargarlo en un objeto imagen.

$("#featured").on('change', function() {
                const [file] = this.files
                if (file) {
                    const img = new Image();
                    img.onload = function() {
                        if(this.width > 1200 && this.height > 630){
                            $("#featuredPreview").attr('src', URL.createObjectURL(file));
                        }else{
                            $("#featured").val("");
                            console.log("La imagen es muy pequeña, utiliza una imagen de al menos 1200 x 630 px.");                        
                        }
                    }
                    img.src = URL.createObjectURL(file);
                }
});

Al terminar de cargar la imagen vamos a acceder a sus propiedades width y height para validar las dimensiones de la imagen.

Aquí es donde nosotros podemos jugar con los valores según nuestro requerimientos, en mi caso ocupo la imagen de al menos 1200 x 600 px.

Si la validación es correcta entonces colocamos un preview de la imagen en el elemento featuredpreview.

En caso de que la validación falle entonces vamos a mostrar un mensaje de alerta advirtiendo al usuario que la imagen no corresponde con los requerimientos.

A su vez eliminamos el valor del elemento imagen para que no se procese.

Así de fácil podemos validar dimensiones de imagen con JS para impedir que el usuario suba imágenes de baja calidad o de dimensiones no esperadas.

Ya tu puedes cambiar las acciones que ocurren cuando es válida la imagen o que hacer cuando no lo es.

En mi caso el mensaje de advertencia lo muestro por ejemplo con una librería de mensajes y no con un simple alert, pero para propósitos de este articulo estaba bien así.

Si esta información sobre cómo validar dimensiones de imagen con JS te ha sido de utilidad no olvides compartirla en tus redes sociales favoritas y dejarnos un comentario en la sección de abajo si tienes cualquier duda relacionada con este tema, será un placer poder ayudarte.

¡Hasta luego!

Clic para valorar esta información

[Total: 3 Promedio: 5]

Validar dimensiones de imagen con JS

jonathan__melgoza