Apr 24, 2013

Image cropping for your web app in 20 minutes

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.

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.

image

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

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:

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. And we’re also always happy to receive pull requests.

Blog comments powered by Disqus

About
Uploadcare handles uploading, storage and processing files for you.