Cambio de tamaño de imágenes en el lado del cliente con JavaScript: una solución de código abierto

En el panorama actual del desarrollo web, a menudo es deseable cambiar el tamaño de las imágenes en el lado del cliente antes subiéndolos al servidor. Este enfoque puede optimizar la calidad de la imagen, reducir la carga del servidor y mejorar la experiencia del usuario al acelerar los tiempos de carga de la página.

Si bien Flash ha sido una opción común para cambiar el tamaño de las imágenes, muchos desarrolladores prefieren evitar su uso. Afortunadamente, existe una solución que utiliza JavaScript para cambiar el tamaño de las imágenes de manera efectiva.

Algoritmo de cambio de tamaño de imágenes de código abierto

El algoritmo de código abierto disponible en GitHub (https://gist .github.com/dcollien/312bce1270a5f511bf4a) proporciona un método confiable para cambiar el tamaño de las imágenes en el lado del cliente. Ofrece una versión ES6 y una versión .js que se puede incluir en etiquetas de script.

Implementación

Para implementar el algoritmo de cambio de tamaño, siga estos pasos:

1. Agregue el código HTML como se muestra a continuación:

2. Agregue el siguiente código JavaScript:

document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};

Funciones y soporte

El algoritmo cuenta con una variedad de funciones y soporte, que incluyen:

• Cambio de tamaño según el ancho máximo especificado y altura
• Admite detección y polyfills para compatibilidad entre navegadores
• Exclusión de GIF animados para mayor eficiencia