Add listener function that is triggered when picture is done moving / zooming

[vlatka-sinisa]

I'm using your cropper as part of form in which user upload the image. Now I'm doing workaround so that when form is submitted the data is retrieved using the getData. Is it possible to define listener function so that my function would be triggered after the image is zoomed or moved (repositioned/cropped)?

[scottcheng]

Do you mean adding a callback as an option which gets called every time the image is zoomed/moved?

[vlatka-sinisa]

Sorry for to little information.

as callback that would be called after the moving/zooming process is done. If possible not during the dragging/zooming since I guess the export every pixel zoomed/moved can slow the browser :)

[scottcheng]

Interesting. If I understand it correctly you want to be able to include the cropped image data in a form submission. If I were you I would probably try the following approach: bind a .submit jquery listener to the form, in which you read the cropped image data using .cropit('export'), and assign that image data to a hidden input, which will go with the form submission. Do you think that would work?

[vlatka-sinisa]

Yes, perfect! I've tested it and it works just as expected!

[vlatka-sinisa]

Sure,

this is the what we’ve done:

var imageCropper = $('#image-cropper');
imageCropper.closest("form").submit(function(){
var imageCropper = $('#{$tuniq}-image-cropper');
var image = imageCropper.cropit('export', {
type: 'image/png',
originalSize: false
});

imageCropper.find(".cropit-image-data").val( image );
});

We’ve also needed one hidden field where the data is placed when its exported:
<input type="hidden" name=“image-data" class="cropit-image-data" />

(just add it inside the

// … other cropit options if needed ...

Sinisa