Cropping in combination with AutoForm / CollectionFS



I got some questions about cropping. Posting them separately doesn’t make sense. So here we go.

I am using AutoForm, CollectionFS, and a wrapped package of the Fengyuanchen cropper by jonblum. I created a form (with AutoForm) in which a square picture must be uploaded: not a small avatar, but a photo of a person. I’d like to give the user of this form an opportunity to crop any picture he would like to use. If the picture needs to be cropped I would like to send this cropped version to the database / filesystem directly.

So far so good. With The File API I ‘send’ the to-be-uploaded-image to a modal in which I run the cropper. Once the user is satisfied with his/her cropping the cropping-data is added to the form. But from that point on I haven’t got a friggin’ clue on what to do next.

In CollectionFS there is a short text and a Wiki on the manipulation of images. Especially this part: But if I understand correctly this is not applicable for me: the cropping is unique on each picture and is done by a user. I can’t find anything on the link between the cropping data and how-and-when to use this data to manipulate the image.

To be a bit more precise:

  1. What is good cropping behaviour? Upload a file first and then manipulate it? Or is it possible to send the cropping data and the original image to the server, manipulate the original, and only store the result. The latter has my preference.

  2. If manipulating-before-storing is possible, can anybody explain me a bit more on how I should proceed in AutoForm (using a before-hook?) to use the transformWrite possibility of the uploaded image? It feels like the transformWrite is done on the server, but my crop-data and original file are on the client side before saving them.

Hope this makes sense, and thanks in advance,