Simple use case example: edit profile page - profile photo upload. User can upload huge photos from iPhone 7 10MB+, user wants to crop/resize image and may be do something else.
- Client-side or server-side?
- What packages, libraries, frameworks are you using?
- How do you store and serve images on back-end?
- What type of image processing functions (crop/rotate/face detection/...) are you using?
- Would you like to see a small article on how to implement such functionality in your own app?
Write your answer…
I do not have an image upload, but if I had to do one with crop and resize:
- I'd go client side (why should I use my expensive resources when there is lots of free power on consumer devices these days? A few images won't kill the battery either...)
- HTML5 Canvas. Crop and resize are very simple, duh
- Some filer or cloud solution. Just make sure to have AV in place
- Face detection is a little more tricky and I might consider looking for a library. The kind of functionality really depends on the use case. If it is a simple profile photo (your example) I would only give them crop and keep the image size at the max. dimensions I defined. Other features (like blur) might be easily implemented via a CV library, so no biggy at all
- Yes, go ahead! I think such an article might be interesting for lots of people :)
Hashnode is building a friendly and inclusive dev community. Come jump on the bandwagon!
💬 A beginner friendly place
🧠 Stay in the loop and grow your knowledge
🍕 >500K developers share programming wisdom here
❤️ Support the growing dev community!
Register ( 500k+ developers strong 👊)
I'm in love with Cloudinary. Doesn't matter what my user uploads - File gets stored at Cloudinary / S3 and when I present the image back to the user, I choose how to manipulate it - be it gravity on a face for a avatar or specifying max width or max height for a banner image or etc... As the user can't be trusted to upload a reasonably sized photo (dimensions or file size) being able to control it on the front / backend is a win / win.
Don't miss out!
Join the growing dev community
Get started (no password needed)
Or Sign in with: