integrar Jcrop y Jquery file upload para subir y recortar imagen

[efren315]

Hola amigos, estoy tratando de crear un script que recorte imagenes y luego las suba al servidor y guarde la ruta en la base de datos pero no lo logro hacer.

La ides es que el usuario al darle clic en el input file y cargue la imagen se le muestre un popup con la imagen para que la recorte y luego de esto si la pueda guardar

no se si me explico me gustaria vieran este video hicieron justo lo que estoy buscando pero la verdad es que yo no supe como hacerlo si alguien me ayuda se lo agradesco

este es el ejemplo
https://www.youtube.com/watch?v=p35yNDmsqhw

[stock]

Yo lo he hecho con jCrop, es bastante sencillo, solo sigue los ejemplos que tienen en su sitio, yo por ejemplo seguí este:

http://deepliquid.com/projects/Jcrop...demo=thumbnail

Primero cree un formulario, que es el que uso para subir la imagen, ahi mismo cree cuatro inputs de tipo hidden, para que almacenen las coordenadas y cuando el usuario haga el submit del formulario pueda obtenerlas en el servidor. Un poco de código:

Código Javascript:

//la imagen que voy a redimencionar
var $target = $('#target'),
 
//el TNS de preview
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
 
//Necesito saber el tamaño del preview
oxsize = $('#user_image_width').val(),
oysize = $('#user_image_height').val()
xsize = $pcnt.width(),
ysize = $pcnt.height(),
 
//tomar los inputs de tipo hidden
x1 = $('#user_x1'),
y1 = $('#user_y1'),
width = $('#user_width'),
height = $('#user_height');
 
$target.Jcrop({
      onChange: updatePreview, //<--- este es importante
      //las configuraciones que necesites aquí
    },function(){
      //... revisa los ejemplos del link que te puse para e código de aquí
    });
 
function updatePreview(c){
      if (parseInt(c.w) > 0){
       
        //aquí actualizamos el valor de las coordenadas
        x1.val(Math.round(oxsize*c.x/$target.width()));   //asignamos la coordenada en X
        y1.val(Math.round(oxsize*c.y/$target.width()));
        width.val(Math.round(oxsize*c.w/$target.width()));
        height.val(Math.round(oysize*c.h/$target.height())); 
 
 
      }
    };
 

Con eso es suficiente para guardar las coordenadas y enviarlas al server, ya en el servidor puedes redimencionar la imágen como gustes, yo lo hice con ruby y paperclip, con PHP debe ser fácil también.

Suerte