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…)

Desenfoque de caja con Python - Difuminado de imagen

Desenfoque de caja (difuminado) con Python

En el artículo de hoy te voy a enseñar a difuminar una imagen aplicando el desenfoque de caja con Python. Vamos a leer la imagen como una matriz e ir modificando cada pixel.

El desenfoque de caja se logra tomando los pixeles vecinos del pixel en cuestión, tomando los RGB de cada uno y promediándolos.

Con “pixeles vecinos” me refiero al pixel que está arriba, abajo, a la derecha, a la izquierda, y en las 4 diagonales posibles.

Al final podremos implementar el desenfoque de caja o box blur en Python manualmente sin usar librerías.

(más…)

Filtro sepia con Python e imageio - Programación para modificar imágenes

Filtro de sepia a imagen con Python

Hoy te enseñaré a aplicar el filtro de sepia a una imagen utilizando programación y manipulación a nivel de pixeles en una imagen usando Python.

No vamos a usar librerías para la transformación, vamos a leer cada nivel de color de cada pixel y transformarlo para tener un filtro sepia.

Todo esto lo haremos recorriendo la matriz de pixeles; al final podremos convertir una imagen a modo sepia con Python.

(más…)

Reflejo horizontal (espejo) a imagen con Python e imageio - Trabajo con imágenes

Reflejo horizontal a imagen con Python

En este post de trabajo con imágenes en Python te mostraré cómo aplicar un reflejo horizontal a una imagen, de modo que podamos voltear la imagen de manera horizontal. Para ello vamos a trabajar con los pixeles de la imagen.

La asignación dice así:

Con este filtro queremos lograr el mismo resultado que un espejo, por lo que cualquier píxel ubicado al izquierdo ahora deberá estar en el derecho y viceversa. Se mantendrán todos los píxeles originales, solo que están organizados de manera diferente.

Entonces veamos cómo hacerlo usando Python, numpy e imageio.

(más…)

OCR con PHP - Detectar texto de una imagen

Extraer texto de imagen con PHP y Tesseract – OCR

En este post de programación en PHP te mostraré cómo extraer el texto de imágenes o mejor dicho cómo usar Tesseract OCR desde este lenguaje, de modo que podamos digitalizar el texto de una imagen usando PHP.

Al final esto que te muestro es un simple wrapper o una envoltura, ya que si bien vamos a procesar la imagen con PHP, internamente vamos a invocar a Tesseract.

Pero bueno, al final veremos cómo usar OCR con PHP para extraer el texto de imágenes. Obviamente te voy a dejar el ejemplo de código.

(más…)

Solicitar firma de usuario con JavaScript y HTML en la web

Solicitar firma manuscrita con JavaScript

En este post te mostraré cómo solicitar la firma a un usuario desde la web usando JavaScript, de modo que el usuario pueda firmar como si lo hiciera en una hoja de papel.

Después podremos enviar esa firma al servidor, descargarla, colocarla en un documento, etcétera.

Documento con firma de usuario con JavaScript - Imprimir o guardar como PDF

Documento con firma de usuario con JavaScript – Imprimir o guardar como PDF

Quiero que quede claro que vamos a solicitar la firma manuscrita usando programación en la web a través de un navegador. Para ello vamos a usar el canvas.

Nota: una vez que la firma haya sido dibujada puedes enviarla a PHP, Java, Node, etcétera. En el ejemplo te mostraré cómo descargarla como imagen y colocarla en un documento.

(más…)

Recortar imagen con PHP y Cropper JS

Recortar foto con PHP

Hoy voy a enseñarte a recortar una foto con PHP dando al usuario la posibilidad de recortar una foto y luego guardarla en el servidor con PHP.

De este modo vamos a darle al usuario la opción de recortar una imagen y guardar el resultado en PHP. Luego ya puedes ligar esa foto o imagen a una base de datos, alojarla en el servidor, usarla para crear otra imagen, etcétera.

Usaremos Cropper.js en el lado del cliente y después enviaremos el resultado a PHP. Con esto vamos a ahorrar recursos pues el recorte de la foto se hará del lado del cliente pero al final prácticamente vamos a recortar la foto con PHP.

(más…)

Canvas enviado como imagen desde JavaScript a PHP

Enviar canvas de JavaScript a PHP

En el post de hoy te mostraré una cosa sencilla pero muy útil: cómo enviar un canvas de HTML a PHP usando JavaScript, para guardar ese canvas como imagen.

Cuando digo que es útil es porque yo creo que canvas nos da varias posibilidades de trabajar con imágenes o con el canvas en sí, y gracias a lo que te mostraré podrás guardar el resultado en el servidor para cualquier cosa.

Se me ocurre que por ejemplo podrías tomar una foto de una credencial de identificación, recortarla y después guardarla con PHP.

(más…)

Recortar imagen con JavaScript - Descargar foto cortada

Recortar imagen con JavaScript

Hoy te mostraré cómo cortar o recortar una imagen con JavaScript. Es decir, darle al usuario la posibilidad de recortar una imagen seleccionando una porción de la misma.

Una vez que la foto haya sido recortada con JS podemos descargarla, colocarla en un canvas, en una imagen o subirla a un servidor que ejecute PHP, Node.js, Python, etcétera.

En resumen te voy a enseñar cómo hacer que el usuario recorte una foto usando JS.

(más…)

Imagen base 64 dentro de PDF con PHP y Dompdf

Problema con imagen en PDF de Dompdf y PHP

Hoy voy a mostrarte la posible solución a un problema que surge cuando generamos documentos PDF usando PHP y Dompdf. El problema en cuestión es que la imagen no aparece en el PDF.

En su lugar, dice:

Image not found or type unknown

Este problema puede deberse a varios problemas, pero lo que te mostraré es una posible solución para que las imágenes aparezcan en el PDF generado con PHP.

(más…)