Blog de conocimiento gratuito: linux, programación, open source, bases de datos, android, frameworks, web e informática en general.
En el post de hoy te enseñaré a comprimir una imagen usando JavaScript al seleccionar una imagen con un input de tipo file.
Con comprimir me refiero a reducir el tamaño del archivo de imagen, cambiando su calidad. Verás que podrás reducir la imagen hasta el 20 % de su calidad sin que se note (y podrás comprimirla incluso más).
De este modo puedes reducir el tamaño de una imagen antes de subirla a un servidor o cosas por el estilo (cambiando su peso, no su medida en pixeles). Todo esto lo haremos del lado del cliente trabajando con JS, Canvas y URL.
Yo hago este post porque estoy usando el storage de Firebase y necesito subir archivos pero no quiero que se agote mi plan gratuito.
También te servirá a ti para ahorrar ancho de banda y almacenamiento en tu servidor, o tal vez solo quieras hacer una app que reduzca la calidad de las imágenes.
Vamos a obtener el File del input y lo vamos a convertir a una URL que podremos colocar dentro de una imagen, tal y como lo hacíamos cuando mostrábamos una vista previa de la imagen.
Después de tener la imagen vamos a colocarla en un canvas con drawImage
(todo esto sin mostrarlo al usuario) y luego invocaremos al método toBlob
que acepta 3 argumentos: el callback, el tipo de archivo y la calidad.
Justo en el tercer argumento vamos a indicar la calidad, que es un número entre el 0 y el 1, mismo que puede ser flotante.
El método toBlob
nos va a devolver (en el callback) otro blob que será la imagen ya comprimida.
Y ese BLOB será igual que el archivo que teníamos originalmente pero ahora con menor calidad y tamaño. Después ya podemos subirlo con FormData o cosas de esas.
Nota: esto solo funciona con imágenes, ya que se les reduce la calidad. No es un algoritmo de compresión como tal.
He creado una función que recibe el file y devuelve el blob. Con esto podemos tener al menos 3 usos:
He convertido el callback a una promesa y queda así:
Para invocar a la función simplemente le pasas la imagen y el porcentaje de calidad (10 para el 10 %, 20 para el 20 %, etcétera). Ahora veamos los 3 escenarios.
Quedaría así:
Esto te deja el tipo blob que ya puedes subir a un servidor, a Firebase, etcétera.
Tenemos otra opción que es convertir el blob a una URL y ponerla como src
de una imagen, así:
El último ejemplo muestra cómo reducir el tamaño de una imagen con JavaScript y descargarla, justo como lo vimos en el tutorial de descargar un canvas:
Me he dado a la tarea de colocar un ejemplo con estas 3 opciones para que puedas probarlo por ti mismo. No es el más bonito, pero cumple con su propósito de demostrar cómo comprimir una imagen con JS:
Si quieres puedes acceder a la demostración en este enlace. También te dejo con más tutoriales de JavaScript en mi blog.
Porque Solo funciona con JPEG y no con PNG?
Hola. Gracias por sus comentarios. Si tiene alguna consulta con gusto lo atiendo en https://parzibyte.me/#contacto
Saludos!