Reducir tamaño de imagen con JavaScript

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.

(más…)

JavaScript – Generar archivo txt con Blob

En este post te mostraré cómo crear un archivo de texto en el navegador con JavaScript, escribir contenido dentro del mismo y luego forzar su descarga. Básicamente vamos a guardar un Blob con JS.

De este modo vas a poder generar un txt con JS y descargarlo. Además, con lo que te mostraré podrás generar un CSV o cualquier tipo de archivo siempre y cuando sepas estructurarlo.

Todo lo que aprenderás será aplicado del lado del cliente, así que no harás llamadas al servidor. Por cierto, usaremos Blob y URL.createObjectURL.

(más…)

PHP: tomar foto con cámara y guardar en MySQL

En este post te mostraré cómo tomar una foto con la cámara web usando JavaScript; para más tarde enviarla a PHP y guardarla en una base de datos.

Recuerda que ya anteriormente vimos cómo hacer lo mismo pero guardando la foto en el disco duro, esto no es más que una modificación a lo que aparece en ese post.

Recomiendo encarecidamente que leas el post que menciono, pues aquí solo cambia la parte del guardado de la foto.

(más…)

Cifrado de datos en MySQL con AES

AES (Advanced encryption standard) es un algoritmo bastante fuerte y seguro, utilizado ampliamente en el mundo de la seguridad informática.

MySQL permite cifrar y descifrar datos utilizando el algoritmo AES a través de las funciones aes_encrypt y aes_decrypt.

Cifrar y descifrar con AES en MySQL

De esta manera podemos proteger y asegurar datos utilizando AES.

En este post vamos a ver cómo cifrar y descifrar datos con AES en MySQL.

(más…)

Previsualizar imagen de input file con JavaScript y HTML

Cuando un usuario selecciona un archivo de tipo imagen con un input de tipo file en HTML podemos generar una previsualización de la imagen dentro de una etiqueta img, a fin de que el usuario conozca la imagen que seleccionó antes de que procese la imagen.

En este post vamos a ver cómo mostrar la imagen seleccionada, escuchando el evento change del input y estableciendo ese file como src de una imagen.

Previsualizar imagen de input con JavaScript

(más…)