[FIXED] How to implement on the UI image cropping feature

Issue

I recently came across one use case to crop the images through imagemagick library.

I am using a hacky way to crop the image using the convert command like this:

                     #left,top     #right,bottom
convert source.png -crop +1300+650 -crop -337-226 destination.png

So basically it chops the images from left, top, right and bottom. How can I build this feature in UI which will help the users to actually crop the image by selecting the area/box on the image and get the cropped image in return. (Avoiding the hassle to know the exact pixels they want to chop)

Solution

Fastest way would obviously be to use one of the available JS image croppers and integrate that with whatever you're using on the front end.

You can of course build the entire UI yourself if you're into that... if someone asked me to do that, I'd probably do something like this:

• Use the canvas element;
• Load the uploaded image there;
• Have the user draw a rectangle on top of it (see here for an example), which would give you the coordinates you need to know;
• Crop the image server side using said coordinates, and send it back to the browser.

Answered By - Brother Woodrow

Answer Checked By - David Marino (PHPFixing Volunteer)