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.
Everything we do at Uploadcare is directed at combating the mundane. Amongst other things, we offer image crop as SaaS. It will work with any image you throw at us, as long as it has a public URL. You only have to take 4 easy steps and we’ll take care of the rest.
Step 1: Register an Uploadcare project
Visit our signup page and register in one easy step. You can use your GitHub or Google accounts for secure one-click sign in.
Upon signup you’ll be forwarded to your profile page with your starting information. Your Uploadcare public and private keys are listed in a large font - make a note of them for later.
Step 2: Choose a form for cropping
We’re going to need a form in your application we can then enhance with the cropping function, say, a profile edit form. You don’t need to enable file uploads (i.e. multipart data), as we simply need the source URL and can integrate cropping in any HTML form.
Step 3: Integrate Uploadcare
We provide a cropping widget served from CloudFlare 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
<script>UPLOADCARE_PUBLIC_KEY = 'your_public_key';</script> <script src="https://ucarecdn.com/widget/0.8.1/uploadcare/uploadcare-0.8.1.min.js"></script>
Next, place this tag anywhere on your form, where you’d like the cropping widget to appear.
<input name="your_form_field_name" value="orginal_image_url" type="hidden" role="uploadcare-uploader" data-images-only data-crop />
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.
Now your form should have a widget like this:
Widget goes here…
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:
POST /files/image_uuid/storage/ HTTP/1.1 Host: api.uploadcare.com Authorization: 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. And we’re also always happy to receive pull requests.