JavaScript drag and drop photo resizer cropper
-
23-08-2019 - |
Question
I have an image of arbitrary size on the page. As an output I need an image of a fixed size, say 90x120px. I would like the user to chose the area of the image by drag-and-dropping the big image behind the 90x120px 'window'. The window would specify the resulting image. Something like this is implemented at facebook image upload.
I know how to deal with the image at backend as soon as I get the cropping coordinates, no problem with that. I guess I need to post the cropping coordinates in hidden form fields. User's drag-and-dropping action should make JavaScript populate the fields, right? I am new to JS, so a step-by-step guide would help a lot.
Solution
- Familiarize yourself with jQuery. It will save yourself time in any js/dhtml project
- http://interface.eyecon.ro/demos/drag.html http://interface.eyecon.ro/demos/resize.html http://interface.eyecon.ro/download
- ???
- Profit
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow