Question

I am trying to use this http://odyniec.net/projects/imgareaselect/examples.html Jquery Cropping example to get the dimension from jquery and send it to my java, so the java file does the cropping for me or i just do it here on the client side, but it doesnt work for me here is a code that i wrote http://jsfiddle.net/UydpR/ to be honest i have no idea what I am doing or how I am suppose to write this, I thought if I just say it will give me the rest of the options…any help or example of the code would be appriciated… I did follow their documentation but I am pretty new at this

Answer 1

Your fiddle setup isn’t correct. you use mootools instead of jQuery. First of all you have to change this. Also you code had a lot of problems, so you have to change it.

You can check out a Version with cropping an Image in this Fiddle:

http://jsfiddle.net/UydpR/2/

If you add a Form with hidden fields and a php file like this code below you can submit the selection coordinates. I havent tried this yet but the developer of the script makes this example.

Add a form with hidden fields (with the names listed below) to your HTML Code.

Add this to the javascript code:

$(document).ready(function () {
$('#ladybug').imgAreaSelect({
    onSelectEnd: function (img, selection) {
        $('input[name="x1"]').val(selection.x1);
        $('input[name="y1"]').val(selection.y1);
        $('input[name="x2"]').val(selection.x2);
        $('input[name="y2"]').val(selection.y2);            
    }
});

});

Be sure that you have make a php file and. Submit the form data to your PHP file and do what you like with it.

Here you can find the tutorial: http://odyniec.net/projects/imgareaselect/examples-callback.html#submitting-selection-coordinates-demo