JavaScript: obtener resolución de imagen
En el post de hoy vamos a programar con JavaScript del lado del cliente para obtener el tamaño original de una imagen, es decir, su alto y ancho originales.
Podemos hacer esto con una imagen existente (etiqueta img) o con una creada a partir de la clase Image. Te mostraré un ejemplo de cómo hacerlo a partir de una imagen seleccionada en un input tipo file.
Rotar imagen en navegador web con JavaScript y canvas
En este artículo te voy a enseñar a rotar una imagen con HTML y JavaScript a través de canvas, de manera que podrás girar una imagen los grados que tú quieras, es decir, rotarla 90, 180, 270 o cualquier cantidad.
Veremos cómo cargar una imagen, pintarla en un canvas, agregarle rotación y después hacer cosas como descargar esa imagen o enviarla al backend que puede ser con Node, C#, PHP, etcétera.
Reducir tamaño de imagen con JavaScript
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).
Reducir tamaño de imagen con JavaScript – Antes y después, al poner el 30 % de calidad
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.
Permitir solo imágenes en input file de HTML
En este post te mostraré el atributo a establecer para aceptar solo imágenes en un campo de formulario de HTML 5 de tipo file, es decir, de un input type file. Por ejemplo, aceptar todo tipo de imágenes, solo imágenes PNG, etcétera.
Recuerda que esto solo es para validar del lado del cliente y que es una ayuda al usuario, pues no implica seguridad que se debe aplicar del lado del servidor.