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.

(más…)

Dart - Convertir imagen RGBA a blanco y negro

Dart: convertir imagen a blanco y negro

En este corto post de programación con Dart te mostraré cómo convertir una imagen (sin importar si es PNG o JPG)  a blanco y negro, manteniendo los niveles para que la imagen se siga viendo bien incluso si solo está en blanco y negro.

El código está escrito en el lenguaje de programación Dart y puede ser usado más tarde en Flutter. De hecho eso haré yo, pues ando porteando mi plugin de impresoras térmicas para Android.

(más…)

Desenfoque de caja con Python - Difuminado de imagen

Aplicar filtros a imagen con Python

En este artículo te mostraré cómo manipular imágenes con Python, aplicarle algunos filtros y transformarlas. Lo que te enseñaré será:

  • Aplicar filtro de escala de grises y sepia
  • Voltear una imagen horizontalmente, como si fuera reflejada en un espejo
  • Desenfocar una imagen usando el desenfoque de caja

Todo esto con Python, escribiendo los algoritmos manualmente sin depender de una librería. Eso sí, para leer la imagen como matriz vamos a usar imageio.

Ya que andamos por aquí te recuerdo que también tengo un post en donde expliqué cómo ocultar texto en 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…)

Reducir tamaño de imagen con PHP

En este corto post de programación con PHP te mostraré cómo reducir la calidad de una imagen, comprimir una imagen o simplemente reducir el tamaño de una imagen.

Ciertamente esto no es comprimir, pues comprimir una imagen con PHP sería comprimirla para después verla en su estado original. Lo que haremos será más bien reducir su calidad o tamaño.

Para esto vas a necesitar la librería GD. Aquí puedes verificar si cuentas con ella.

(más…)

Solución a Immutable bitmap passed to canvas constructor en Android y Java

En este post te mostraré la solución a un problema de Android que dice así:

E/AndroidRuntime: FATAL EXCEPTION: main
Process: me.parzibyte.controldeentregas, PID: 4817
java.lang.IllegalStateException: Immutable bitmap passed to Canvas constructor at android.graphics.Canvas.<init>(Canvas.java:131)

El error es muy claro: estamos pasando un bitmap inmutable al constructor de Canvas; hay que hacer el Bitmap mutable.

(más…)

Marca de agua colocada con PHP y GD

Poner marca de agua a imágenes con PHP

En este post voy a explicar y demostrar cómo se pueden poner marcas de agua con PHP utilizando las funciones de la librería GD.

Vamos a ver cómo poner la marca de agua en distintas posiciones (arriba a la izquierda, arriba a la derecha, centrada horizontal y verticalmente) y cómo modificar la opacidad de la marca de agua.

Marca de agua colocada con PHP y GD

Marca de agua colocada con PHP y GD

En la imagen de arriba se puede notar que he colocado una marca de agua de una “terminal” sobre una captura de código C (es sobre el post de generar números aleatorios con C).

He elegido estas dos imágenes porque el dueño soy yo, así que no pueden existir reclamaciones de derechos de autor y esas cosas que dan pereza.

Nota: recuerda que hace tiempo publiqué WaterPy, una aplicación similar pero escrita en Python.

(más…)