Hace poco comentamos en nuestra sección de noticias un recurso interesante para editar imágenes de manera online, llamado Pixrl. Se trata de un editor de imagen muy similar, en aspecto, a Photoshop y con bastantes funcionalidades avanzadas de los programas de retoque fotográfico, pero con la característica principal que el trabajo se realiza dentro del navegador.

Pixlr es un producto recomendable para todo aquel que necesite retocar una foto, gracias a sus variadas herramientas y filtros. Podríamos recomendarlo incluso para crear un diseño a a partir de cero, ya que tiene muy buenas utilidades para dibujo. Al ser una aplicación online tiene sus limitaciones, pero sus posibilidades se multiplican a través del API que vamos a comentar en este manual.

Puedes encontrar Pixlr en: http://www.pixlr.com

Adicionalmente al propio editor online, Pixlr dispone de un API, bastante sencillo, con el que podremos utilizar esta herramienta para trabajar con fotos publicadas en nuestro sitio web. La idea es que Pixlr se puede integrar en nuestra web, de modo que los usuarios puedan utilizarlo para retocar fotos, realizar diseños, etc. desde nuestro propio sitio. El editor de imágenes online permitiría, a nosotros como administradores o a nuestros usuarios, realizar cualquier tipo de trabajo con imágenes que tengamos publicadas en el servidor, o crear diseños con Pixlr y luego subirlos a la web.

Un uso que se puede hacer con relativa sencillez es disponer en nuestra web de un formulario donde los usuarios pueden hacer el upload de una imagen o fotografía. Luego esa imagen la llevamos a Pixlr para que ese mismo usuario pueda editar lo que desee y finalmente, que pueda guardar los cambios en la foto directamente en nuestro servidor. A lo largo de este manual, que vamos a dividir en distintos artículos, voy a explicar cómo montar esta funcionalidad en nuestro servidor utilizando el API de Pixlr.

Lo cierto es que los ejemplos que me han servidor de guía para realizar este proceso los he extraído desde la propia documentación del API de Pixlr, donde los han publicado para ayudar a los desarrolladores. Yo me he dedicado a personalizarlos y añadir alguna que otra línea de código para adaptarlo a mis necesidades. Aparte, he comentado el propio código para que se pueda entender mejor y se sepa qué se está haciendo en los puntos más delicados.

También he encontrado algunos problemas que he podido resolver, después de algún tiempo de quebraderos de cabeza. Nada demasiado complicad, pero este manual servirá principalmente para explicar los puntos donde he tenido problemas y las soluciones que he encontrado. Ponerlo todo en marcha, no en producción, sino en fase de pruebas, me ha costado una tarde, lo que no es nada comparado con las posibilidades que se abren gracias a este API de edición gráfica. Ayudado con esta guía, estoy seguro que podrás implantarlo en menos de una hora.

Lo cierto es que el API de Pixlr está todavía en fase beta, pero las funcionalidades ya se pueden explotar sin problemas. La documentación es todavía escasa y no encuentro páginas web de otros desarrolladores que hayan probado el API de Pixlr y lo hayan explicado, así que espero dar algo de luz a los interesados en utilizar este sistema en sus webs. Seguro que pronto ampliarán la documentación, pero de momento hay incluso funcionalidades y parámetros de los que no se dice nada. La suerte es que el sistema es suficientemente sencillo como para entender lo que aun no se había documentado.

Los scripts que voy a comentar los he probado en el servidor de DesarrolloWeb.com y todo funciona como cabría esperar. No obstante, los he borrado del servidor y no los vamos a disponibilizar para vuestras pruebas, dado que se hace upload de fotos al servidor y no es mi deseeo cargarlo con esos archivos. Para solucionarlo e ilustrar el objetivo de este manual, he creado un vídeo que muestra el sistema en funcionamiento, de modo que os podréis hacer una idea previa de lo que vamos a explicar y así será más fácil entenderlo.

Para continuar, aquí tienes los aspectos fundamentales de la documentación del API Pixlr.