0

The application I'm working on allows users to add an unlimited number of images onto a viewport. With those images, a series of operations are allowed: resize, drag, rotate, and crop. For the cropping feature, I'm using the Jcrop plugin.

When clicking on the control icon for cropping, a lightbox appears, that shows the selected image (the <img> element is one and the same, only the src attribute value changes each time) and allows the user to crop it. The event handler associated triggered when the crop icon is clicked is:

$(document).on("click", "div.cropper", function(){

            var ctrl = $(this),
                ref = ctrl.attr("reference"),
                obj = returnObj(objects,ref),
                target = $("#crop-target")
                crop_params = {};

            target.attr("src",obj.src);
            target.Jcrop({
                onSelect: function(c){
                    crop_params = c;
                }
            });
});

Given the code above, the cropping works perfectly, but ONLY with the first image I try it on. When I click on the "cropper" icon for any other images after that, the first image is shown.

How can I work around this problem?

PS: I've searched through the already existing questions about Jcrop and couldn't find an answer to my particular problem.

Andrei Oniga
  • 8,219
  • 15
  • 52
  • 89
  • may I know what is returnObj do and what is reference? – SuVeRa Sep 28 '12 at 11:39
  • 3
    You need to reset your co-ordinates on onClick event. Or just remove jCrop and initialize again. see this post http://stackoverflow.com/questions/4466333/how-do-i-remove-jcrop – Sandy Sep 28 '12 at 11:40
  • @Sandy It seems that I've completely missed the post you gave me the link to when searching. And **foob**'s answer was the perfect solution to my problem. Thank you very, very much, Sandy! – Andrei Oniga Sep 28 '12 at 20:30

1 Answers1

0

You just need to create a new img tag and start jCrop with that.

$('#parent_tag #img_to_crop').remove();
$('#parent_tag').html('<img id="img_to_crop"></img>');
$('#parent_tag #img_to_crop').Jcrop({ options ... });
Saulo Damian Cabral
  • 1