Cropping with Jcrop and Pixastic

Now I am building a website for image manipulation and I am using most the functions in Pixastic and they are really good. However, I was thinking whether there is any improvement for the cropping function.

I can use the cropping function in Pixastic but I would like to crop image through cursor. I don't want to put in the values of the position like this:

function cropImg()  {
Pixastic.process(document.getElementById("image"), "crop", {rect: {left: 50, top:50, width:50, height: 50}});

};

However, I couldn't figure out how to get the value of the position by using jquery, such as offset(), e.pageX, e.pageY, mousedown() and mouseup(), so I decide to use Jcrop for cropping. But if anyone of you can help me figure this out will be very nice.

This is my Jcrop code:

$(document).ready(function(){
$('#image').Jcrop({
    onChange: showCoords,
    onSelect: showCoords
});
});
function showCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};

These Jcrop code enable me select the area and tell me the value of the position but It didn't show me how to crop or the button that I can set up for the function, so I was thinking whether I can combine Pixastic and Jcrop like this:

function cropImg()  {
Pixastic.process(document.getElementById("image"), "crop", {rect: {left: $('#x').val(), top: $('#y').val(), width: $('#w').val(), height: $('#h').val()}});

};

I was thinking that if Jcrop can tell me the value of the positions, I can just put those values into the Pixastic cropImg function.

I put Pixastic code and Jcrop code separately in two files, but no matter what I do, they can't work together. Either I can select the image and none of the Pixastic functions work or Jcrop doesn't work.

Thus, I am asking for help if anyone knows how to make the cropping work and I appreciate your answers very much!! Please let me know if I haven't explained my question clearly and more information you need to solve this.

Thank you in advance and sorry for such long question. Have a great day!!

P.S I just learned HTML, CSS and Javascript a month ago but don't know other programming languages at all, so if you can explain in details or give me an easier answer, that will be great!!

Solution

Here is the code that I used now in my project.

var canvasImage = $(".editor canvas");
canvasImage.Jcrop({
    onSelect: function (coords) {
        canvasImage.pixastic("crop", {
            rect: {
                left: coords.x,
                top: coords.y,
                width: coords.w,
                height: coords.h
            }
        });
        this.release();
        this.disable();
    }
});

Note that I used also Pixastic jQuery adapter in addition to Jcrop & Pixastic.