Effects Tab for Uploadcare Widget
Effects Tab provides 9 effects for on-the-fly image editing on upload: crop, rotate, enhance, sharpen, blur, mirror, flip, grayscale and invert. You can customize which effects are allowed and otherwise affect the tab behavior.
Here is a live demo.
Image operations provided by Effects Tab are based on the capabilities of our CDN API. The tab outputs a CDN link holding your image UUID and image operations applied by a user during the in-tab editing process. Technically, every original image is firstly uploaded to our CDN and then shown to a user in Effects Tab. In case of uploading multiple files, this happens 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 CDN API limitations.
You’re free to 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>
That’s how you add Effects Tab to the 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).
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
It’s possible your locale is not available in the tab yet. If that’s the case, contributing your locale might be a good idea. This can be done by forking the main repository followed by adding a new localization file here.