La evolución de las tecnologías vinculadas con el desarrollo web en los últimos años está resultando frenética, lo que ha hecho posible que se puedan implementar funcionalidades antes sólo posibles con herramientas como Adobe Flash. Esto es especialmente relevante si tenemos en cuenta que todo lo relacionado con lo multimedia cada vez tiene más peso en la web, y que las interacciones en esta son cada vez más complejas.

Uno de los campos que se han hecho posibles gracias a esta evolución es el de la manipulación y transformación de imágenes desde el navegador, lo que permite la creación de interfaces más ricas, llegando incluso a competir con la experiencia de usuario de una aplicación nativa. En los últimos años este campo ha sufrido un vuelco espectacular con la aparición de dos nuevas tecnologías:

• La etiqueta <canvas>, una nueva etiqueta introducida en HTML5 que permite dibujar gráficos al vuelo mediante JavaScript, la cual incluye métodos para dibujar primitivas e imágenes.
• WebGL: API para renderizar gráficos en 2D y 3D en la web, que al contrario que otras soluciones similares, se trata de un estándar desarrollado por Mozilla y basado en OpenGL 2.0.

En torno a estos dos elementos han empezado a surgir librerías JavaScript que facilitan el trabajo a la hora de implementar filtros, control por capas, etc. Como pasa con las librerías JavaScript relacionadas con nuevas especificaciones, existen bastantes que cubren ciertos aspectos de estas, pero no existe ninguna indiscutible o especialmente popular, lo que requiere un cuidadoso estudio previo a la hora de seleccionar una para nuestros proyectos.

En CETA-Ciemat llevamos años trabajando y desarrollando aplicaciones web, al igual que investigamos sobre temas muy cercanos al tratamiento de imágenes, sobretodo en el ámbito de la salud. Con la aparición de estas tecnologías, la evolución lógica es investigar cómo combinar estas dos líneas y llevar a la web algunas de nuestras aplicaciones con todo lo que esto conlleva. En nuestro caso concreto, nuestro mayor interés es encontrar una tecnología que garantice la manipulación de imágenes de alta resolución con un rendimiento lo suficientemente bueno para que el usuario no eche de menos una aplicación de escritorio nativa.

Esta es nuestra experiencia con las librerías JavaScript relacionadas con el tratamiento de imágenes que hemos podido probar:

CamanJS

Al buscar en Google sobre librerías de Javascript es imposible no toparse con CamanJS. Se trata de una librería orientada para la aplicación de filtros a imágenes renderizadas en un canvas. Tiene también métodos para retocar y cambiar el tamaño de imágenes, pero si se requiere implementar algún tipo de aplicación más interactiva necesita de cierto trabajo extra. Por suerte se puede expandir a base de plugins.

• URL: http://camanjs.com/
• Uso recomendado: Filtrado de imágenes.

FabricJS

FabricJS es una librería que implementa métodos de alto nivel para manipular un canvas, ya que las funciones definidas en el estándar del canvas son de bajo nivel. FabricJS funciona añadiendo elementos que se pueden manipular independientemente, lo que permite realizar aplicaciones complejas siguiendo una estructura orientada a objetos. Además incluye una serie de utilidades extra tales como filtros, eventos y animaciones y una documentación bastante completa comparada con el resto de librerías. El único punto negro es que no soporta el renderizado por WebGL, aunque está en su hoja de ruta.

• URL: http://fabricjs.com/
• Uso recomendado: Cualquier tipo de aplicación que requiera manipulación de imágenes, aunque no demasiado pesadas.

ProcessingJS

Processing es un lenguaje de programación que según sus creadores está orientado a artistas visuales, pero realmente puede ser usado para cualquier tipo de interfaces gráficas interactivas, ya que incluye métodos para renderizar y manipular imágenes. ProcessingJS es un proyecto que permite cargar ficheros Processing y renderizarlos en un elemento <canvas>. Hay que tener en cuenta que realmente no es una librería para trabajar con JavaScript, sino que todas las operaciones realizan en el lenguaje Processing.

• URL: http://processingjs.org/
• Uso recomendado: Visualización de datos.

PixiJS

PixiJS es una librería orientada a facilitar la gestión de gráficos 2D con WebGL. Es muy popular para crear videojuegos con HTML5 pese a no estar orientada a ningún tipo de aplicación en concreto y tiene un modo fallback que usa sólo el elemento <canvas>. No tiene una API a tan alto nivel como FabricJS, pero esconde muchas de las complejidades de WebGL. Sin embargo, al estar basada en esta última, es una opción a tener muy en cuenta debido a su velocidad de renderizado, especialmente si trabajamos con imágenes grandes o vamos a realizar operaciones muy complejas.

• URL: http://www.pixijs.com/
• Uso recomendado: Cualquier tipo de aplicación que requiera manipulación de imágenes.

EaselJS

EaselJS es una librería similar a PixiJS, es decir una librería el renderizado y tratamiento de gráficos 2D con WebGL. El problema que tiene es que parece rendir peor que PixiJS (ver http://jsperf.com/js-anim/2 y http://www.html5gamedevs.com/topic/3869-what-makes-pixi-faster-than-easel/ para más detalle técnico) y tiene una documentación algo escasa.

• URL: http://www.createjs.com/easeljs
• Uso recomendado: Cualquier tipo de aplicación que requiera manipulación de imágenes.

Antes de finalizar, comentar que otras librerías como Collie o KineticJS se han quedado fuera del listado por, o ser muy específicas (por ejemplo, Collie está totalmente orientada a la animación) o por no tener soporte (KinectJS).

Y aquí termina el primero de lo que esperamos que sean una serie de artículos con nuestras experiencias con el tratamiento de imágenes sobre JavaScript. El siguiente artículo entrará en detalle sobre el estudio realizado en CETA-Ciemat sobre las anteriores librerías, con una idea en mente: portar nuestra estación de ayuda al diagnóstico de cáncer de mama (MIWAD) a la web.