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.

  1. Client-side or server-side?
  2. What packages, libraries, frameworks are you using?
  3. How do you store and serve images on back-end?
  4. What type of image processing functions (crop/rotate/face detection/...) are you using?
  5. Would you like to see a small article on how to implement such functionality in your own app?

Write your answer…

6 answers

I do not have an image upload, but if I had to do one with crop and resize:

  1. 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...)
  2. HTML5 Canvas. Crop and resize are very simple, duh
  3. Some filer or cloud solution. Just make sure to have AV in place
  4. 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
  5. 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 👊)

For client side, have you seen Dropzone.js? It's great for async drag/dropping and uploading files. You can autocrop them with a library like smartcrop.js.

I recently was working on an angular-laravel application. I used Angular Image upload plugin for size validations.

For the Cropping i used intervention. Its a really awesome image manipulation library with tons of features

They are pretty straight forward and simple to use.

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.

Load more responses