File-Preview Interface: Image Cropper Added

[theharshin]

Features added:

• Cropping
• Rotating
• Flipping
• Aspect Ratio

Image cropping can be enabled by enabling 'Image Editor' option in 'Editing Options' section of Interface. I've chosen to keep checkboxes because in future we can add other media editing options.
Note:
Kindly have a look at how I've managed the image caching issue. If you can suggest a better option, I'll update that.
Also, a large base64 string throws an error due to Directus activity column.

[benhaynes]

Thank you @theharshin !! I'll let you know if we have any questions/concerns after playing with it for a bit...

We've fixed the file data exceeding the limit in directus_activity

[benhaynes]

After messing with this for a while, I can tell you did an amazing job! I know this has already been merged, but here is the feedback @theharshin ...

1. When cropping, you can drag the image outside the crop zone so that there is negative space (alpha:0). Is it possible to restrict movement so that you can only crop within the image?
2. An issue I've seen from Remove demo interfaces from api repo #1 is that when it has to include an alpha layer (transparent zone) it seems like it's generating a PNG but saving it as a JPG file extension. Can we preserve the original file type/extension?
3. When saving the new image it seems like we are getting additional compression/artifacts with each save... which makes the image a bit lower quality each time. Do we have a setting for what quality to use? Also, without moving anything, it is adding an alpha transparency to the right of the image. See the example below:

Original

After 5 Saves (no other changes)

[benhaynes]

Also, it would be good to exit the image editor when you hit the ESCAPE key. :)

[benhaynes]

This one MIGHT not be possible, but I wanted to ask: can we "stage" the data change on the edit page and only save it when the user clicks the file page's "save" button? Right now it saves when you click the button on the interface, but ideally it doesn't save until you actually save the whole page.

Thoughts? @rijkvanzanten

[rijkvanzanten]

Probably not ideal. It would mean we'd have to base64 whatever binary content of the media file there is and upload it inlined in the JSON. This would cause a huge post request which was the main cause of all our file issues in prior versions. Having it in a separate upload, we can optimize the actual upload itself.

[benhaynes]

Gotcha. Perhaps we could stage it and submit it in a separate request (as it works now) but only when they hit the page save button? So from a UX perspective it feels unified and they can "cancel" right up until they hit save... but in reality it's similar to how it is now.

Thoughts on that?

[theharshin]

Thanks for the feedback @benhaynes
Please have a look at these points.

1. When cropping, you can drag the image outside the crop zone so that there is negative space (alpha:0). Is it possible to restrict movement so that you can only crop within the image?

We can do that but it will create an issue when image is rotated. This issue describes it better:
fengyuanchen/cropperjs#346

2. An issue I've seen from Remove demo interfaces from api repo #1 is that when it has to include an alpha layer (transparent zone) it seems like it's generating a PNG but saving it as a JPG file extension. Can we preserve the original file type/extension?

I've edited the PNG, Transparent PNG and JPG on my side and each of them is working fine and maintaining original format. Can you share an image which is creating an issue?

3. When saving the new image it seems like we are getting additional compression/artifacts with each save... which makes the image a bit lower quality each time. Do we have a setting for what quality to use? Also, without moving anything, it is adding an alpha transparency to the right of the image.

Done 👍 We have to define imageSmoothingQuality:high in getCroppedCanvas method.

4. Also, it would be good to exit the image editor when you hit the ESCAPE key. :)
   Done 👍

Regarding the staging of data and merging request with actual 'Save' button, we can do it if there is a hooks or callback when sending the Form Save request. Let me know if we should do that or not.

[rijkvanzanten]

@benhaynes I would need to implement some "hooks" in the app first. There's no way for this file component to know when the page is saving / being canceled etc

[benhaynes]

1. That rotation issue is a bummer. I commented on that issue, we'll see what happens!

2. If you rotate a JPG it gets transparent sides and saves as a PNG (original name/extension are not changed. So here are the steps:

A. Upload this JPG image

B. Rotate it 90°

C. Download original file (now it's a PNG)

I assume the best way to avoid this is to "fill" the background with a color (eg: black) so we don't need transparency and can keep it as a JPG.

3. Thanks!

4. OK, let's wait on this... we can add it as an improvement later, but we'd need the App hooks first.

[benhaynes]

@theharshin – was that quality change submitted as a PR?

[theharshin]

@benhaynes I've not submitted PR. I'm working in this rotation issue. Should I allow the crop area to span outside of the image and keep the black background as the fill for the blank area?

[benhaynes]

Ideally the crop area rotates with the image. Here is my reasoning:

1. Open Editor
2. Click Rotate Once (90°)
3. Click Save

Using the above three steps you would expect the image to be rotated... but not be cropped or any black borders added. Is that possible?