Fabric.js para manipular y generar imágenes con canvas

El canvas de HTML es muy potente por sí solo, pero a veces se torna difícil de programar. Fabric te permite multiplicar el poder de la etiqueta canvas, porque te ayuda a administrar los elementos que colocas dentro, como objetos. Puedes modificar sus atributos e interactuar por medio de vértices, entre muchas más opciones muy potentes.

Vamos, pues, en este post, a inicializar nuestro canvas con habilidades especiales, agregar una imagen desde nuestra computadora y de paso a generar un descargable PNG desde nuestro navegador. ¡Bueno, vamos allá! 🍿

Inicializando el proyecto

Para este proyecto vamos a utilizar únicamente un archivo: index.html

Observa cómo producimos un objeto canvas a partir de la clase fabric.Canvas con una instancia, y pasando el id del nodo. También puedes no seleccionarlo y generar el nodo directamente, pero este método es el más sencillo.

Antes de pasar directo a la construcción de nuestro editor de imágenes, quiero que veas cómo ya estamos listos para agregar objetos al canvas:

De esta forma, tienes total control del objeto que has agregado al canvas. Ahora es sumamente simple cambiarlo, rotarlo o incluso eliminarlo programáticamente. ¡Pero ahora también puedes interactuar con el elemento usando el mouse!

¿Genial, no? 🤯

🎬 ¿Te está gustando este contenido? Tenemos más tutoriales en video en nuestro canal de YouTube.

Vamos ahora a permitir que el usuario agregue una imagen

Agreguemos un input de tipo file para que nuestro usuario pueda colocar una imagen en el canvas.

Y de paso agregamos un listener para manipular la imagen que el usuario subió, una vez lista.

Pasan varias cosas aquí:

1. Dentro de onchange tomamos el archivo y generamos un objeto URL a partir de él. Antes hacíamos esto con FileReader, pero gracias a la clase URL ahora es más fácil. ✅
2. Creamos el nodo img para cargar la visualización.
3. Una vez que la imagen ha cargado, generamos una instancia con fabric.Image con ciertos atributos como la rotación.
4. Finalmente, agregamos nuestro objeto al canvas.

👀 Rotar elementos en el canvas con Fabric es inmensamente fácil y útil. Esto sería muy difícil de hacer con el canvas nativo.

Una última adición: Generar una imagen a partir del canvas

Para terminar, vamos a agregar un botón que genere nuestra imagen compuesta en formato PNG y detone una descarga.

Primero, añadimos un botón y su respectivo listener.

Para lograrlo hay que solicitar la imagen al canvas con una pequeña configuración y posteriormente asignarla a una etiqueta <a> que nos permita detonar la descarga.

💥 Lo lograste. Es hora de dejar volar tus ideas, tu creatividad y usar fabric para construir experiencias modernas en tus aplicaciones.

Conclusión

Fabric es muy poderoso y su documentación tiene una infinidad de ejemplos y tutoriales, seguro encuentras cómo hacer aquello que necesitas para modificar imágenes dentro de tu app.

No dejes de echarle un vistazo a su documentación oficial. 🤓

Recuerda que puedes aprender a usar canvas con puro JS aquí.

Abrazo. bliss.