Last Updated: February 25, 2016

How to crop image for you webapp in 20 min

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.

However, adding crop functionality to your uploads or existing images is but another mundane task to deal with, eating up time better spent on new ideas. Try Googling javascript image crop right now. There will be 30+ solutions and even blog posts attempting to describe them as vaguely as possible. What’s worse, when you finally pick one that better suits your language and framework of choice, you’re confronted with a very specific API, so good luck integrating it into your existing code base.

Alt Pic

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>

<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.

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:

https://ucarecdn.com/3addab78-6368-4c55-ac08-22412b6a2a4c/

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 image_uuid, your_public_key, and 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.

That’s it!

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.