Question

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

Answer 1

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.