Cropping from inside the browser is great: it’s intuitive and simpler than loading a dedicated image editor. You can crop profile photos, graphics for user profile backgrounds or headers, and any sort of gallery images.
Step 1: Start with choosing uploading service
There are some nice service like Uploadcare, Chute or InkFilepicker to handle your files on the web. We'll demonstrate the example of Uploadcare, as it provides for options for image editing.
Step 2: Choose a form for cropping
You don’t need to enable file uploads (i.e. multipart data), only source URL. Service is to be integrated into any HTML form.
Step 3: Integrate the service
Uploadcare provides a cropping widget served from CDN with guaranteed uptime. Of course you can also download it and serve from your own domain, if you wish to do so.
To apply the widget to your form, add this to the bottom of the <head> section:
<script>UPLOADCARE_PUBLIC_KEY = 'your_public_key';</script>
Next, place this tag anywhere on your form, where you’d like the cropping widget to appear.
Copy and paste this code, or create an input like this with your form helpers. Be sure to replace
original_image_url with an actual URL of the image you’d like to crop.
The cropped image will automatically be hosted on our CDN. The UUID of this image will be submitted with your form as the value of the input field you added (named
your_form_field_name in the sample code above).
You can restrict the way cropping is done with the data-crop attribute, by specifying the desired aspect ratio, as well as the minimum and maximum size, by use of automatic scaling. These options are fully described in widget documentation.
Step 4: Accept the cropped image
In your form submission handle you should have received an UUID (mentioned above). This is the UUID of the cropped version of the image stored on our CDN. It has a publicly-accessible URL:
This is a permalink that can replace the original image URL, where
3addab78-6368-4c55-ac08-22412b6a2a4c is the UUID.
But the image is not automatically available at this URL after a user submits the form. You need to acknowledge that it should be made public, by sending an HTTP request:
Uploadcare.Simple your_public_key: your_private_key
It’s a simple POST with a special Authorization header. Of course
your_private_key should be replaced with their real values.
Alternatively, there are Uploadcare libraries for a number of programming languages and frameworks that will do this storage request for you.
You’ve just given your users the ability to crop images, and without breaking a sweat. Well done.
The widget you’ve seen is also open source. If you’re not satisfied with it out of the box, feel free to fork around it and change it to your liking.