In-Browser Image Editing
Editing images right in a browser is the closest path for your app to receive better images. And those, in turn, provide higher engagement rates and conversions. The quality of visuals becomes an even greater concern when you want to perfect images sent by your users before they get to your site or app.
There are nine on-the-fly effects you can apply right in the widget UI: crop, rotate, enhance, sharpen, blur, mirror, flip, grayscale, and invert.
You can configure which effects are enabled and change the tab behavior in other ways.
Image operations available for applying in the widget dialog are based on our Image Processing feature. Effects Tab outputs a CDN URL holding image UUIDs and operations applied by a user while editing in form of URL directives. You can learn more about our Image Processing and available operations here.
Technically, every image first gets to your Uploadcare project. Then we show an image preview in the widget dialog via a CDN URL provided on file upload. When a user applies image processing operations, we inject the corresponding URL directives. Once the editing is complete, Effect Tab outputs the new CDN URL which includes all the applied operations.
For example, if a user chose to apply
grayscale and clicked
rotate once, here is what we will get in the output:
preview operation will appear in the output URL by default due to the Image Processing limitations.
The only requirement is integrating Uploadcare Widget before using Effects Tab.
Choose from the install methods listed below.
Get Effects Tab,
npm i uploadcare-widget-tab-effects --save
Import the tab it in your module,
import uploadcareTabEffects from 'uploadcare-widget-tab-effects'
You can either install the minified Effects Tab version,
<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.min.js" charset="utf-8"></script>
Or go with a bundled version without minification,
<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.js" charset="utf-8"></script>
Start using Effects Tab by adding it to your widget:
There are multiple ways to configure the set of effects enabled in Effects Tab.
You can either go with a string holding coma-separated effect names:
UPLOADCARE_EFFECTS = 'blur,sharp,grayscale'
or use another approach:
UPLOADCARE_EFFECTS = ['blur', 'sharp', 'grayscale']
The set of enabled effects for a specific widget instance can be controlled via the
<input type="hidden" role="uploadcare-uploader" name="content"
Following the widget concept, the allowed effects can be provided as the
effects: ['blur', 'sharp', 'grayscale'],
This allows you to configure the set of enabled effects. It also controls the order of effects in the tab: however,
crop will always placed first in the set.
effects can either be a string holding one or more comma-separated effects or an array of strings, JS only. You can also enable all effects by setting the option to
crop, crops images freely or using set aspect ratios
rotate, rotates images
mirror, provides image-mirroring capabilities
flip, allows flipping images
blur, filters images via Gaussian Blur
sharp, allows adjusting image sharpness
enhance, makes images look better via auto levels, auto contrast, and saturation sharpening
grayscale, desaturates images
invert, inverts image colors