Introducción al API de Web Resizer

Web Resizer es una herramienta online que ofrece capacidades de upload de fotografías, así como su edición y optimización sencilla, directamente desde una página web. Sus capacidades son diversas y en general bastante sencillas de utilizar, directamente sobre formularios HTML. Es decir, es una aplicación online que nos permite subir fotos y luego editar diversos atributos, como la calidad el tamaño, etc. a través de unos sencillos formularios al alcance de los usuarios más inexpertos.

Lo bueno de Web Resizer es su sencillez, ideal de cara a usuarios poco avanzados. A pesar de ser un sistema bastante simple, las posibilidades de configuración de las imágenes son bastante atractivas, enfocadas sobre todo en optimizar la imagen para que ocupe poco tamaño y sea fácilmente transferible por Internet.

http://www.webresizer.com

Entre las posibilidades de trabajo con imágenes podríamos destacar:

• Permite cargar imágenes hasta 5 megas
• Permite recorte de la imagen, con una herramienta visual muy sencilla
• Tiene una opción para enfocar la imagen
• Permite rotar la imagen
• Tiene diversos ajustes disponibles, como brillo, contraste, saturación, etc.
• Posibilidad de crear bordes en las imágenes cargadas.
• Etc.

Todo ello, en un producto gratuito para cualquier uso y fácilmente integrable en cualquier página web que desee proveer de capacidades de upload y edición de imágenes a sus usuarios.

La integración se realiza a través de un API Javascript, con el que puedes incluir en tus páginas web opciones para optimizar imágenes de forma sencilla, sin necesidad de utilizar otros programas de retoque fotográfico a la hora de guardar las imágenes en un servidor o guardarlas en tu disco duro.

Puedes ver un ejemplo de Web Resizer de optimización de imágenes para guardarlas en tu disco duro en la web http://www.webresizer.com/resizer/.

Nosotros conocimos Web Resizer porque estábamos buscando una manera para que los usuarios que subían fotografías a guiarte.com pudieran realizar diversas tareas simples de edición de las imágenes. Para ello podríamos haber construido nuestro propio sistema de edición, pero sin duda hubiéramos tardado semanas o meses y los resultados no serían tan buenos como los que nos ofrece Web Resizer. Además, dado el perfil de usuarios poco técnicos del sitio, WebResizer se adaptaba perfectamente, porque es todo lo simple que puede llegar a ser un producto de este estilo.

Puedes ver la integración que hicimos de Web Resizer para guiarte.com, por ejemplo en el formulario para subir fotos de España, en la URL http://www.guiarte.com/usuarios/enviar-foto/avanzado/index.php?pais=64.

Características

• Web Resizer sólo es compatible con archivos de tipo .GIF, .JPG Y .PNG.
• El tamaño del archivo imagen puede ser como máximo de 5MB.
• Se recomienda utilizar Mozilla Firefox para su mejor funcionamiento. No obstante, es compatible con los navegadores habituales.
• Es multi-idioma, con soporte para Español.

Qué se puede hacer con Web Resizer

Las funcionalidades de Web Resizer están divididas en varios apartados, como podremos ver en el demo. Luego en este manual mostraremos cómo hacer que algunas de estas opciones desaparezcan, pero en un principio encontraremos:

Recorte y marco: Con posibilidades de señalar con un cuadrado el área que nos interesa de una imagen, para recortarla. Los marcos nos permiten dibujar bordes de diversos tipos y colores a las fotos.

Opciones básicas: Podemos cambiar el tamaño de la imagen, indicando un ancho o alto predefinido, rotar la imagen 90 grados a la izquierda o derecha y darle un giro de 180 grados, cambiar la nitidez de la imagen, predefinir la calidad de la imagen con la posibilidad de ver una comparación de la imagen con distinto nivel de calidad.

Opciones avanzadas: Crear imágenes monocromáticas especificando el color deseado, cambiar el contraste, tono y saturación de color de la imagen y añadir un marco a la imagen.

Instalación de Web Resizer en tu web

Para poder utilizar Web Resizer en tu sitio web, primero tienes que escribir un mail a la dirección de correo api [arroba] webresizer.com indicando tu nombre y la URL de la página donde se va a utilizar este API.

Una vez recibida la clave del API (que suelen enviarte en un plazo de 24-48 horas) bastará con introducir las siguientes lineas de código:

<script type="text/javascript">

webresizer_apikey = 'AQUI-TU-CLAVE-API-WEBRESIZER';

</script>
<script type="text/javascript"
src="http://api.webresizer.com/ext/js/webresizer_api.js">
</script>

Este código sirve para hacer upload de imágenes, que luego podrás editar desde tu web y guardar retocadas en tu disco duro. En los siguientes artículos mostraremos ejemplos para integrar Web Resizer de una manera más potente, que nos permita procesar las imágenes y guardarlas luego en nuestro servidor web.