Level 122
you said
User uses the editor to select a part of the image, applies filters, rotate flip.... and so on,
so eg, filters can only be done client side and then sending the server the revised image
Mar 23, 2022
7
Level 3
Crop Image
This is a question about best approach. Quick overview is user uploads image, now the site has an online editor so the uploaded image is the source and remains untouched. User uses the editor to select a part of the image, applies filters, rotate flip.... and so on, those details get sent to laravel and creates an image from the source.
And there is no preview on the upload function, and not what is wanted for this implementation
Now I have done this in either of 2 ways
So assume image has been uploaded, and user decides they want to edit it.
Scenario 1: User opens editor, makes changes -> Send crop data (x , y width, height coordinates only) and in the back end pull image from storage, make the new image from the sourced original and save the new image
Scenario 2: User make changes and send the base64 image, pre-cropped string to laravel and simply create an image and store it.
I have both ways working and each with its own set of pros and cons.
But curious what in your opinion makes more sense?
Scenario 1 seems more secure in terms that the uploaded image is the source and already verified as image / mime and trust worthy source, but pulling the image from storage takes a little longer, yet the user is only sending crop coordinates (small amount of data)
Scenario 2 the user is doing the majority of the work but also if on mobile using a qood chunk of data sending the base64 to the site
Any insight as to your approach, and why?
Thanks
Level 3
@snapey Correct, The front end editor displays the users the uploaded original image as source image. Remains untouched always. Any visual filters, flipping, rotation cropping are all applied visually, when saved thats when a new entire image gets created and everything is applied to that image permanently. Original => stays in storage and only used as the source Edited => New image gets stored in S3 also but is used on the users site / gallery and has all edits applied as a final image.
Everytime a user makes an edit, a new image is created.
Everyone knows photoshop, I am not selecting Save, think of this as Save As... saving a new copy / version and leaving the original all alone.
If user goes back to the editor and pulls up that image again, the saved DB info on what was done to the original, flip, filters, crop selection get reapplied to the original visually so user can see what was done, clear to return back to a visually untouched original or whatever add more filters, reposition the crop selection.....
But the point is when a user clicks save regardless of anything else.
Is it best to send the base64 image string - or - send only the crop info (x, y, w, h, rotate, scaleX, scaleY..... ) and do the cropping on the back end? I end up with exact results either way
Both work, I am am looking for feedback on why people do either and why the reasoning behind.
Thanks
Level 122
@movepixels id be surprised if you can achieve pixel perfect parity between client rendered effects and server rendered effects, meaning that the image that is saved does not look exactly the same as the user envisioned.
Level 3
@Snapey Thanks for response once again :) I think my question or the point is not coming across clear. I am asking there are 2 ways to do something. I have set it up to do it both ways with the same result. But just because they both work I am looking for insight which is best, what method do people use / prefer and why.
Forget everything else and break it down to bare minimum.... user crops an image. Do you send the base64 string - OR - send the crop coordinates and crop on the back end.
Thanks again
Level 122
@movepixels as I said. Save what the user sees when they crop, filter rotate etc. So send the modified image from the client to the server each time they save.
Your argument is that say I apply a sepia filter in some browser tool, then you will just send 'sepia' + 25% for example to the server and then apply that same filter to the original image at the server, but probably using a different library, in a different language, and ending up with a slightly different result.
If you are only cropping (so far) then that's easy since cropping is a precise process.
Level 3
I understand what you are saying. But still forget filters, end result of image quality or any of that. Completely not the question.
The procedure.... in terms if user experience, taking into account possibility of this being on a cell phone vs desktop
When YOU crop an image do YOU send the base64 or the crop info?
Your code > (you do it which way) -> result Pretty simple question, yes i send a base64 and reason why, or no i would send the crop coordinate and why,
Thats all I am asking. Not anything else...
Thanks but i will just drop this question anyways,
Thanks all the same for your time
Level 122
i've consistently given you the same answer but you seem to not want to hear it, so not sure why you asked the question
Please or to participate in this conversation.