Cambiar el tamaño de las imágenes del lado del cliente con JavaScript antes de cargarlas

Cambiar el tamaño de las imágenes del lado del cliente ofrece varias ventajas antes de cargarlas en el servidor. Reduce la carga del servidor, acelera la representación de la página y proporciona una mejor experiencia de usuario.

¿Es posible cambiar el tamaño de la imagen JavaScript del lado del cliente?

Sí, es posible cambiar el tamaño de las imágenes del lado del cliente usando JavaScript. Hay algoritmos de código abierto disponibles que permiten cambiar el tamaño sin recurrir a Flash.

Algoritmo para cambiar el tamaño de imágenes del lado del cliente

Uno de esos algoritmos está disponible en GitHub: https: //gist.github.com/dcollien/312bce1270a5f511bf4a. Incluye versiones en ES6 y JavaScript básico que se pueden integrar en cualquier aplicación web.

Ejemplo de uso

Para usar el algoritmo:

1. Incruste el código JavaScript proporcionado en su página web.
2. Defina una entrada para la selección de archivos y especifique una etiqueta de imagen para mostrar la imagen redimensionada.
3. En el detector de eventos onchange para la entrada, invocar la función de cambio de tamaño proporcionada por el algoritmo. Especifique las dimensiones deseadas y una función de devolución de llamada.
4. La función de devolución de llamada recibirá el blob redimensionado y una marca que indica si el cambio de tamaño se realizó correctamente.
5. Utilice el blob devuelto para establecer el atributo src del etiqueta de imagen para obtener una vista previa de la imagen redimensionada.

Características

• Admite ES6 y JavaScript estándar.
• Detecta automáticamente las capacidades del navegador y aplica polyfills para una compatibilidad óptima.
• Ignora las imágenes GIF animadas para mantener su integridad.