Mootools Image Cropping

  • 22/09/2008
  • 8:31 pm
  • unijimpe

MooCrop es una utilidad para cortar imágenes de forma visual en web utilizando Mootools. Esta librería te permite seleccionar parte de una imagen de forma gráfica, esto unido a un script de servidor te permitirá cortar imágenes sin necesidad de programas adicionales.

Caracteristicas
MooCrop es altamente personalizable, entre las cualidades mas destacables tenemos:

  • Completamente personalizable con CSS
  • Permite enmascarar la imagen a cortar.
  • Facilidad para escalar y mover las zonas a cortar.
  • Eventos personalizables.
  • Rápido, código limpio
  • Funciona en IE 6 & 7, FF 2+, Opera 9.2 y Safari 2 & 3..

Utilizando MooCrop
Lo primero es descargar las librerías: mootools.js y MooCrop.js. Luego de ello procedemos a incluir estas librerías en el header del HTML.

  1. <script type="text/javascript" src="mootools.js"></script>
  2. <script type="text/javascript" src="MooCrop.js"></script>

El siguiente paso es colocar una imagen al cual hay que agregarle un identificador para luego llamarlo con esta librería.

  1. <img src="image.jpg" id="imgcrop" />

Luego llamamos a la clase MooCrop el cual recibe como parámetro el identificador de la imagen al cual deseamos mostrar la opción para cortar la imagen, con esto ya tenemos la opcion para seleccionar la parte de la imagen que deseamos cortar.

  1. window.addEvent('load',function(){
  2.     var crop = new MooCrop('imgcrop');
  3. });

Ahora el siguiente paso es enviar los datos del bloque seleccionado a un script PHP el cual es el encargado de cortar la imagen original. Entonces lo que hacemos es agregar una función en el evento Doble Click el cual envía los datos al script crop.php.

  1. window.addEvent('load',function(){
  2.     var crop = new MooCrop('imgcrop');
  3.     crop.addEvent('onDblClk', function(img, crop, bound){
  4.         $('cropped').src = "crop.php?action=crop&w="+crop.width+"&h="+crop.height+"&x="+crop.left+"&y="+crop.top;
  5.     });
  6. });

Entonces uniendo estos elementos, tenemos listo nuestra aplicación para cortar imágenes al vuelo el cual puedes ver en MooCrop Demo. Este script lo puedes utilizar por ejemplo cuando tus usuarios suben sus fotos para darles la posibilidad de cortarlas antes de subirlas.

Posts Relacionados

AutoClear en Formularios HTML

  • 19/08/2008
  • 12:44 am
  • unijimpe

Uno de los métodos mas prácticos para indicar a los usuarios que tipo de información debe ingresar en los formularios es incluir un valor inicial. El siguiente ejemplo ayudará a mostrar valores por defecto los cuales se limpiarán al acceder al campo y volverán a mostrar el valor iniciar si no se ha ingresado información.

Preparando el Formulario
Lo primero es crear nuestro formulario, lo hacemos de la manera normal donde incluimos los valores iniciales que utilizaremos para indicar al usuario que valores ingresar.

  1. <strong>Registro de Usuarios:</strong><br />
  2. Nombre: <input type="text" id="name" value="Nombre" /><br />
  3. Email: <input type="text" id="name" value="Email" /><br />
  4. Web: <input type="text" id="web" value="Direccion Web" /><br />
  5. <input name="btsend" type="button" value="Enviar" />

AutoClear Utilizando Javascript
La primero forma es utilizar solamente Javascript, para ello nos hemos basado en el script propuesto en Unobtrusive JavaScript: Auto-Clear and Restore Multiple Form Inputs on Focus, este script se ejecuta al cargarse la página y recorre todos los elementos input text y guarda el valor inicial del formulario en la propiedad rel, luego agrega los eventos a ejecutarse en onfocus, onblur y ondblclick, en donde se verifica si se ha ingresado algún valor para mostrar la ayuda.

  1. function init(){
  2.     var inp = document.getElementsByTagName('input');
  3.     for(var i = 0; i <inp.length; i++) {
  4.         if(inp[i].type == 'text') {
  5.             inp[i].setAttribute('rel', inp[i].defaultValue);
  6.             inp[i].onfocus = function() {
  7.                 if(this.value == this.getAttribute('rel')) {
  8.                     this.value = '';
  9.                 } else {
  10.                     return false;
  11.                 }
  12.             }
  13.             inp[i].onblur = function() {
  14.                 if(this.value == '') {
  15.                     this.value = this.getAttribute('rel');
  16.                 } else {
  17.                     return false;
  18.                 }
  19.             }
  20.             inp[i].ondblclick = function() {
  21.                 this.value = this.getAttribute('rel')
  22.             }
  23.         }
  24.     }
  25. }
  26. if(document.childNodes) {
  27.     window.onload = init
  28. }

Este script los colocamos en el header de nuestro HTML y ya tenemos el efecto AutoClear en nuestro formulario, podemos ver el resultado de este ejemplo en autoclear-javascript.html y si desean pueden ver el código fuente para ver como si incluyo el script.

AutoClear Utilizando Mootools
Si estamos utilizando Mootools, podemos reescribir esta función, utilizando los selectores de elementos y llamando a la función en el evento domready el cual es llamado cuando se ha cargado la página.

  1. window.addEvent('domready', function() {
  2.     inp = $$('input[type=text]');
  3.     inp.each(function(inp) {
  4.         inp.setProperty('rel', inp.value);
  5.         inp.addEvent('focus', function(){
  6.             if (this.value == this.getProperty('rel')){
  7.                 this.value = '';
  8.             }
  9.         });
  10.         inp.addEvent('blur', function(){
  11.             if (this.value == ''){
  12.                 this.value = this.getProperty('rel');
  13.             }
  14.         });
  15.         inp.addEvent('dblclick', function(){
  16.             this.value = this.getAttribute('rel');
  17.         });
  18.     });
  19. });

Nótese que hemos utilizado la función each de Mootools que nos permite recorrer todos los elemento del array que contienen los campos de texto, lo siguiente es agregar los eventos para detectar el focuso blur. Pueden ver el resultado de esta versión en autoclear-mootools.html

Posts Relacionados

JSON con Mootools

  • 20/07/2008
  • 7:21 pm
  • unijimpe

JSON (JavaScript Object Notation) es un formato basado en Javascript para intercambio de datos. JSON es una alternativa a XML pues brinda sencillez al momento de leer los datos, en Javascript puede ser analizado utilizando eval(), además provee sencillez para manipular los datos. Para mas información acerca de las diferencias con XML además de sus virtudes en: JSON.

Obteniendo los datos
Para nuestro ejemplo vamos a utilizar Google AJAX Search API, el cual es un servicio que nos utilizar los resultados de búsqueda de Google. No utilizaremos la funciones que provee Google si no que lo haremos utilizando JSON, para ello encontramos documentación en Flash and other Non-Javascript Environments.

Si deseamos obtener los resultado de la búsqueda de la palabra Google, lo podemos hacer accediendo al siguiente URL:

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Google

Este URL devolverá un objeto conteniendo los resultados de la búsqueda en un array ademas de estadísticas de resultados:

  1. { "results": [
  2.   {
  3.    "GsearchResultClass": "GwebSearch",
  4.    "unescapedUrl": "http://en.wikipedia.org/wiki/Paris_Hilton",
  5.    "url": "http://en.wikipedia.org/wiki/Paris_Hilton",
  6.    "visibleUrl": "en.wikipedia.org",
  7.    "cacheUrl": "http://www.google.com/search?...",
  8.    "title": "\u003cb\u003eParis Hilton\u003c/b\u003e",
  9.    "titleNoFormatting": "Paris Hilton",
  10.    "content": "In 2006, she released her debut..."
  11.   },
  12.   {
  13.    "GsearchResultClass": "GwebSearch",
  14.    "unescapedUrl": "http://www.imdb.com/name/nm0385296/",
  15.    "url": "http://www.imdb.com/name/nm0385296/",
  16.    "visibleUrl": "www.imdb.com",
  17.    "cacheUrl": "http://www.google.com/search?...",
  18.    "title": "\u003cb\u003eParis Hilton\u003c/b\u003e",
  19.    "titleNoFormatting": "Paris Hilton",
  20.    "content": "Self: Zoolander. Socialite..."
  21.   },
  22.   ...
  23.  ],
  24.  "cursor": {
  25.   "pages": [
  26.    { "start": "0", "label": 1 },
  27.    { "start": "4", "label": 2 },
  28.    { "start": "8", "label": 3 },
  29.    { "start": "12","label": 4 }
  30.   ],
  31.   "estimatedResultCount": "59600000",
  32.   "currentPageIndex": 0,
  33.   "moreResultsUrl": "http://www.google.com/search?..."
  34.  }
  35. }, 200, null)

Creando un Proxy
Normalmente cuando se accede a datos JSON se hacen sobre el mismo dominio, pero como nosotros deseamos acceder a los datos de Google necesitamos crear un proxy para cambiar de dominio los datos recibidos. Esto por que nos browsers no permites acceder a datos de otros dominios. Entonces creamos el archivo proxy.php.

  1. $apiQue = "Google"; // variable a consultar
  2. $apiKey = "tu_key_google"; // key para acceder al servicio
  3. $apiUrl = "http://ajax.googleapis.com/ajax/services/search/web";
  4. if (isset($_GET['query'])){
  5.    $apiQue = urlencode($_GET['query']);
  6. }
  7. readfile($apiUrl."?v=1.0&key=".$apiKey."&q=".$apiQue);

Cargando los datos con Mootools
La nueva versión de Mootools trae el método Request.JSON que permite cargar y parsear automáticamente datos JSON, para nuestro caso cargaremos los datos del proxy recién creado y lo mostraremos utilizando la función alert. Primero incluimos la librería Mootools en el header de nuestro html y luego obtenemos los datos JSON.

  1. <script type="text/javascript" src="mootools.js"></script>

  1. window.addEvent('domready', function() {
  2.     var path = "proxy.php?query=unijimpe";
  3.     var json = new Request.JSON({url: path, onComplete: onLoad});
  4.     json.get();
  5.     function onLoad(obj){
  6.         var results = obj.responseData.results;
  7.         for (i=0; i<results.length; i++) {
  8.             var tmp = results[i];
  9.             alert(i + " --> " + tmp.title + "\n" + tmp.url)
  10.         }
  11.     }
  12. });

Pueden ver el resultado en: /json/index.html.

Como pueden observar, la función onLoad se ejecuta cuando se ha completado la carga de los datos, dentro de esta función podemos acceder a los datos recién cargados como si fueran objetos es decir podemos acceder a todas sus propiedades utilizando el operador punto (.).

Entonces si deseamos mostrar la cantidad total de resultados podríamos hacer mediante obj.estimatedResultCount, entonces para acceder a los resultados de la búsqueda accedemos a obj.responseData.results el cual contiene un array con los resultados de la búsqueda por lo cual utilizamos un FOR para acceder a cada elemento.

Ahora si deseamos mostrar estos resultados como HTML y no como alerts, lo primero es crear un div en donde escribiremos los resultados y modificar brevemente nuestro script.

  1. window.addEvent('domready', function() {
  2.     var path = "proxy.php?query=unijimpe";
  3.     var json = new Request.JSON({url: path, onComplete: onLoad});
  4.     json.get();
  5.     function onLoad(obj){
  6.         var tmpHTML = "";
  7.         var results = obj.responseData.results;
  8.         for (i=0; i<results.length; i++) {
  9.             var tmp = results[i];
  10.             tmpHTML+= "<a href='"+tmp.url+"'>"+tmp.title+"</a>";
  11.             tmpHTML+= "<br />"+tmp.content+"<br/>";
  12.             tmpHTML+= "<i>"+tmp.url+"</i><br /><br />";
  13.         }
  14.         $("results").set("html", tmpHTML);
  15.     }
  16. });

  1. <div id="results">Loading...</div>

Pueden ver el resultado en: /json/json.html.

Finalmente, agregamos un campo te texto y un botón para crear un formulario de búsqueda para mostrar la potencia de JSON. Esto lo hacemos con el siguiente código.

  1. window.addEvent('domready', function() {
  2.     var path = "proxy.php?query=unijimpe";
  3.     var json = new Request.JSON({url: path, onComplete: onLoad});
  4.     json.get();
  5.     function onLoad(obj){
  6.         var tmpHTML = "";
  7.         var results = obj.responseData.results;
  8.         for (i=0; i<results.length; i++) {
  9.             var tmp = results[i];
  10.             tmpHTML+= "<a href='"+tmp.url+"'>"+tmp.title+"</a>";
  11.             tmpHTML+= "<br />"+tmp.content+"<br/>";
  12.             tmpHTML+= "<i>"+tmp.url+"</i><br /><br />";
  13.         }
  14.         $("results").set("html", tmpHTML);
  15.     }
  16.  
  17.     function sendSearch() {
  18.         $("results").set("html", "Loading...");
  19.         path = "proxy.php?query=" + $("q").value;
  20.         json = new Request.JSON({url:path, onComplete: onLoad});
  21.         json.get();
  22.     }
  23.    
  24.     $("bt").addEvent("click", sendSearch);
  25. });

  1. <div id="search">
  2. Buscador JSON
  3. <input type="text" id="q" name="q" />
  4. <input type="submit" id="bt" name="bt" value="Buscar" />
  5. </div>
  6. <div id="results">&nbsp;</div>

Pueden ver el resultado en: /json/search.html.

Como pueden ver utilizando Mootools para manejar JSON es muy fácil el implementar aplicaciones con acceso remoto a datos o también llamado AJAX solo que no estamos utilizando XML y además tenemos la posibilidad de formatear a nuestro antojo los resultados obtenidos.

Mas Información

Posts Relacionados