¿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.

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.

<img width="200" src="dist/imagen-no-disponible.png" height="200" id="imagen1_preview" />
<input type="file" id="imagen1" onchange="revisarImagen(this,1);">

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.

var imagen = [];

function revisarImagen(input, num){
    var id_preview = input.getAttribute("id") + "_preview";
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onloadend = function (e) {
            var id_preview_text = "#"+id_preview;
            var base64image = e.target.result;
            $("body").append("<canvas id='tempCanvas' width='800' height='800' style='display:none'></canvas>");
            var canvas=document.getElementById("tempCanvas");
            var ctx=canvas.getContext("2d");
            var cw=canvas.width;
            var ch=canvas.height;
            var maxW=800;
            var maxH=800;
            var img = new Image;
            img.src=this.result;
            img.onload = function(){
                var iw=img.width;
                var ih=img.height;
                var scale=Math.min((maxW/iw),(maxH/ih));
                var iwScaled=iw*scale;
                var ihScaled=ih*scale;
                canvas.width=iwScaled;
                canvas.height=ihScaled;
                ctx.drawImage(img,0,0,iwScaled,ihScaled);
                base64image = canvas.toDataURL("image/jpeg");
                $(id_preview_text).attr('src', base64image).width(250).height(157);
                imagen[num] = base64image;
                $("#tempCanvas").remove();
            }
        };
        reader.readAsDataURL(input.files[0]);
    }

}

¿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!

Clic para valorar esta información

[Total: 1 Promedio: 5]

Redimensionar una imagen de un Input File

Codigo HTML del Input File

Codigo Javascript del metodo revisarImagen

jonathan__melgoza