Jcrop: Image Cropping con jQuery y PHP

Image Cropping es una tecnica que usa para eliminar el exterior de una imagen y asi poder tener el tamaño y dimensiones deseados de la imagen.
Jcrop es un plugin para jQuery 1.2.6 que nos hace muy facil realizar Image Cropping en web.

Compatibilidad de Navegadores:

  • Firefox 2+
  • Safari 3
  • Opera 9
  • Google Chrome 0.2
  • Internet Explorer 6+
  • Ahora explicare detalladamente como realizar el Image Cropping con Jcrop:

    Incluir los javascript y hojas de estilo en head

    Dentro de head incluiremos la libreria Javascript JQuery, Jcrop y la hoja de estilo Jcrop

    <script src="js/jquery.pack.js"></script>
    <script src="js/jquery.Jcrop.pack.js"></script>
    <link rel="stylesheet" href="css/jquery.Jcrop.css" />
    

    Realizar las funciones para funcionamiento

    Aqui crearemos 3 funciones javascript, una es la que convertira la imagen en un widget Jcrop, la segunda sera llamada desde la primera al seleccionar la region dentro de la imagen, esta actualizara los elementos que serviran para saber que region cortar, la tercera funcion validara que este seleccionada una parte de la imagen.

    $(function(){
    
        $('#cropbox').Jcrop({
            aspectRatio: 1,
            onSelect: updateCoords
        });
    
    });
    
    function updateCoords(c)
    {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    };
    
    function validar()
    {
        if (parseInt($('#x').val())) return true;
        alert('Seleccionar una region');
        return false;
    };
    

    Incluir la imagen y formulario en body

    Dentro de body pondremos una etiqueta de imagen la cual llebara un id que lo identifique y un formulario el cual tendra un boton tipo submit y cuatro inputs tipo hidden que serviran para saber la region seleccionada

    <img src="flowers.jpg" id="cropbox" />
    <form action="" method="post" onSubmit="return validar();">
        <input type="hidden" id="x" name="x" />
        <input type="hidden" id="y" name="y" />
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="h" name="h" />
        <input type="submit" value="Crop Image" />
    </form>
    

    Incluir la funcion para Image Cropping

    Despues de incluir la imagen debemos de realizar el siguiente paso, este codigo convertira la imagen en un un widget Jcrop el cual permitira hacer una seleccion con el mouse dentro de la imagen.

    jQuery(function(){
    			jQuery('#cropbox').Jcrop();
    		});
    

    Recursos:

También te puede interesar

One Comment

  1. Alidad
    feb 19, 2011 @ 21:42:46

    i like your scripts, but is there is way to change to upload images and then crop then save it!

    i need that help please.