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.

<script type="text/javascript" src="mootools.js"></script>
<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.

<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.

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

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.

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

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.