Event not firing when image is repositioned. about cropit

[scottcheng]

There is no API for listening to image repositioning at the moment. One way to get around this is to listen to mousemove event on the preview element (see here).

I'd like to understand more about your use case scenario, i.e. why do you want to get the cropped image every time it is repositioned?

[kangafoo]

Hi,
I am using it to let users upload their image in a registration form.
when they crop it they will need to center the image to get their desired
part of the image.

I fixed it with mouseup()

$('#imgPreview').mouseup( function () {
var value = valueAccessor();
//var image = $('#image-cropper').cropit('export');
var image = $('#image-cropper').cropit('export', {
type: 'image/jpeg',
quality: .9,
originalSize: false
});
value(image);
});
}

Thanks for the help.

On 12 September 2014 07:19, Scott Cheng [email protected] wrote:

There is no API for listening to image repositioning at the moment. One
way to get around this is to listen to mousemove event on the preview
element (see here

cropit/src/cropit.coffee

Line 164 in cc54f34

@$preview.on 'mousemove', @onMove.bind @

).

I'd like to understand more about your use case scenario, i.e. why do you
want to get the cropped image every time it is repositioned?

—
Reply to this email directly or view it on GitHub
#9 (comment).

[scottcheng]

I see. Are you trying to reflect the updated cropped image, e.g. show the cropped image somewhere else, every time it is repositioned? Otherwise if what you need is to pass the cropped image with the form, you only need to call export before form submission, instead of after each time the image is dragged.

Also, you may want to also listen to mouseleave, because mouseup does not get called when user moves the mouse out of the preview box whiling pressing it.

[kangafoo]

Hey thanks. Will add the mouseleave event as well. I call export on change
of image-cropper and update a knockout binding. The cropper seems to pick
up a change when I change the slider. However, if my last action is
dragging the image, then it does not pick it up and the submitted image is
that of the last zoomed one.

On 12 September 2014 14:08, Scott Cheng [email protected] wrote:

I see. Are you trying to reflect the updated cropped image, e.g. show the
cropped image somewhere else, every time it is repositioned? Otherwise if
what you need is to pass the cropped image with the form, you only need to
call export before form submission, instead of after each time the image
is dragged.

Also, you may want to also listen to mouseleave, because mouseup does not
get called when user moves the mouse out of the preview box whiling
pressing it.

—
Reply to this email directly or view it on GitHub
#9 (comment).

[scottcheng]

Glad to know it's working, although it still seems to me that a better solution may be to only call export right before you actually submit the form.

Regarding why change is not working, my guess is that when the slider is changed, the slider element fires a change event when then bubbles up to #image-cropper which you are then able to capture. However when the image is dragged no change event is fired anywhere.