Mootools Image Cropping

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.

Comentarios Total 4 comentarios


Kar
Publicado: 27/09/2008 9:25 pm

Muy buena esta herramienta ojala sigas publicando librerias de moon tools

Recortar imgenes en formularios
Publicado: 26/01/2009 9:30 am

[…] MooCrop, para Mootools (Tutorial) […]

gonzalo andres lucio
Publicado: 21/07/2009 12:57 am

hola.. resulta que me funciona bien el cortar la imagen, quedo con dos dudas si alguien puede ayudarme.
1. quiero que la recorte sea estatico o sea que pueda seleccionarse pero que el tamaño sea de 256px x 256px

2. Como hago que el archi crop.php me guarde la imagen en el disco… (yo las subo normalitas pero como se supone ya se edito como puedo subirla..)

Una pregunta mas que pena la ignorancia sobre el punto 2 el crop.php esta en el servidor pero el obtiene realmente la imagen?

zonarock
Publicado: 21/07/2010 11:07 pm

no hay forma de redimencionar imagens con mootools, seria genial enves de usar php

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)