> Manuales > Manual del API de Web Resizer

Optimiza tus imágenes desde tu sitio web sin necesidad de utilizar otros programas.

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:


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.

Nota: Otro API para retoque fotográfico es el API de Pixlr, que también evaluamos en su momento, pero nos parecía muy complicada para nuestros usuarios. Si te interesa, te recomiendo que lo analices y aprendas a integrar en el Manual del API de Pixlr.

Características

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.

Gema Maria Molina Prados

Equipo DesarrolloWeb.com

Manual