Effects Tab for Uploadcare Widget
Better images provide higher click rates and conversions. If you are working with user-generated images, you would want users to perfect those before they get to your site or app.
There are nine on-the-fly effects you can apply on upload: crop, rotate, enhance, sharpen, blur, mirror, flip, grayscale, and invert.
You can configure which effects are allowed and change the tab behavior in many ways.
Feel free to get your hands on Effects Tab before reading further.
Image operations provided by Effects Tab are based on the capabilities of our image processing. The tab outputs a CDN URL holding image UUID and image operations applied by a user while editing. Technically, every original image is firstly uploaded to your project. So, it first appears on our CDN and is then shown to a user in Effects Tab. Multiple files are uploaded asynchronously.
For example, if a user chose to apply
grayscale and clicked
rotate once, this is how the output value looks like:
You will always have the
preview operation in Effects Tab output URL due to our image processing limitations.
Choose from the install methods listed below.
Get Effects Tab,
npm i uploadcare-widget-tab-effects --save
And then import it in your module,
import uploadcareTabEffects from 'uploadcare-widget-tab-effects'
You can either install this minification-enabled Effects Tab version,
<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.min.js" charset="utf-8"></script>
Or a bundled version without minification,
<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.js" charset="utf-8"></script>
To start using Effects Tab, just add it to your widget:
This section describes different ways to set which effects are allowed in the Effects Tab.
UPLOADCARE_EFFECTS = 'blur,sharp,grayscale'
UPLOADCARE_EFFECTS = ['blur', 'sharp', 'grayscale']
<input type="hidden" role="uploadcare-uploader" name="content"
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 is always the 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