PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Wednesday, July 27, 2022

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

 July 27, 2022     crop, image, imagemagick, knockout.js, user-interface     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing