Cross-Browser Image Crop9 Minutes to Integrate
Cropping images is a common task and an everyday routine for producing content. We believe image crop should happen right in your browser and be intuitive and simple. Firing a dedicated image editor to do the cropping is an overkill.
This tutorial is about enabling your users to crop images in any browser with Uploadcare, no matter the device or browser they use.
There are three simple steps to take:
- Step 1. Set Up Your Uploadcare Account and Project
- Step 2. Pick Where You Want the Crop
- Step 3. Integrate the Widget
You will only need the Public API Key that points to a target project where the images will go to.
Pick a form in your web app where you want users to crop images. It could be a profile editing form, image upload form, etc.
Note, our widget enables your users to upload images from their camera, social media, cloud storage, and more. We call those “Upload Sources,” and you can learn more about them in our docs.
You install the widget by adding a couple of
<script> elements to your page
<head>. It comes in a variety of bundles and is usually served from our CDN.
Here’s how it goes. First, add this to your page
<script>UPLOADCARE_PUBLIC_KEY = 'your_public_key';</script>
<script src="https://ucarecdn.com/libs/widget/3.7.0/uploadcare.full.min.js" charset="utf-8"></script>
Next, place this
<input> where you want our widget to appear on your page:
The widget looks for inputs with
role="uploadcare-uploader" and places its button there.
value attribute may either be empty or contain a CDN URL or UUID of an image on Uploadcare. The non-empty
value will preload a file into your widget dialog. Otherwise, your users will be prompted to load a file from one of the enabled Upload Sources. You can learn more about default files in the widget dialog in our docs.
That’s what you should get by now:
Once you’re done cropping, your image CDN URL gets updated with the
crop Image Transformation. The widget then passes the updated CDN URL to the input
value, and from there you can use it for other routines.
That’s how the updated CDN URL may look like:
You can define the widget crop presets by specifying the
data-crop attribute. This is useful when you want specific aspect ratios, image dimensions, etc.
Yoohoo, That’s it 🚀
You’ve just enabled image crop in your app via Uploadcare without breaking a sweat. Great job!
If you’d like to customize the widget to your app’s look, check out the docs section on widget styling.
Our widget is open source, here's its GitHub repo. Issues and PRs are welcome.