Effects Tab for Uploadcare Widget. Edit images in desktop and mobile browsers.
npm install uploadcare-widget-tab-effects
src="https://ucarecdn.com/2f4864b7-ed0e-4411-965b-8148623aa680/uploadcare-logo-mark.svg"
alt="">
Effects Tab is an [Uploadcare Widget][uc-docs-widget] addon
that allows for in-browser image editing on desktop and mobile.
Technically, it's a [custom widget tab][uc-docs-widget-custom-tabs]
that replaces Preview Tab.
[![NPM version][badge-npm-img]][badge-npm-url]
[![Uploadcare stack on StackShare][badge-stack-img]][badge-stack-url]
Effects Tab provides 9 effects for on-the-fly image editing in desktop or mobile browsers:
crop, rotate, mirror, flip, blur, sharpen, enhance, grayscale and invert.
You can customize which effects are allowed and otherwise affect the tab behavior.
* How it works
* Demo
* Requirements
* Install
* Usage
* Configuration
* Options
* Localization
* Security issues
* Feedback
Image operations provided by Effects Tab are based on the capabilities
of Uploadcare [Image Processing][uc-feature-image-processing].
The tab outputs a CDN link holding your image [UUID][uc-docs-uuid] and
[image operations][uc-docs-cdn-image-operations] applied by a user while editing.
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][uc-docs-widget-multi-upload], this happens asynchronously.
For example, if a user chose to apply grayscale and clicked rotate once,
this is how the output value looks like:
```
https://ucarecdn.com/:UUID/-/preview/-/grayscale/-/rotate/270/
You will always have the preview operation in Effects Tab output URL due to
CDN API [limitations][uc-docs-cdn-limits].
Check out the basic demo [here][demo].
Since Effects Tab is a [custom tab][uc-docs-widget-custom-tabs] for Uploadcare Widget,
make sure to start with [installing the widget][uc-docs-widget-install].
You’re free to choose from the install methods listed below.
Get Effects Tab:
`bash`
npm i uploadcare-widget-tab-effects --save
And then import it in your module:
`javascript`
import uploadcareTabEffects from 'uploadcare-widget-tab-effects'
Directly include the Effects Tab script one a page using
`html`
To reduce loading time, you can also choose one of the following:
* The minified all-locales bundle uploadcare.tab-effects.min.jsuploadcare.tab-effects.lang.en.js
* The english-only bundle uploadcare.tab-effects.lang.en.min.js
* The minified english-only bundle
> Note: When using a bundle above, you should also use the matching version of uploadcare-widget (minified or english-only).
That’s how you add Effects Tab to the widget:
`javascript`
uploadcare.registerTab('preview', uploadcareTabEffects)
This section describes different ways to set which effects are allowed
in the Effects Tab.
`html`
or
`html`
`html`
data-effects="blur,sharp,grayscale"
/>
`javascript`
uploadcare.start({
effects: 'blur,sharp,grayscale',
})
or
`javascript`
uploadcare.start({
effects: ['blur', 'sharp', 'grayscale'],
})
Global: UPLOADCARE_EFFECTS data-effects
Local: effects
Object key:
Default value: crop,rotate,enhance,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 moreall
comma-separated effects or an array of strings (JS only).
You can also enable all effects by setting the option to .
Available effects:
* crop — crops images freely or using set aspect ratiosrotate
* — rotates imagesmirror
* — provides image-mirroring capabilitiesflip
* — allows flipping imagesblur
* — filters images via Gaussian Blursharp
* — allows adjusting image sharpnessenhance
* — makes images look better via autograyscale
levels, auto contrast, and saturation sharpening
* — desaturates imagesinvert
* — 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][github-home]
followed by adding a new localization file [here][github-files-locales] and add import and export` your locale [here][github-files-locales-index].
If you think you ran into something in Uploadcare libraries which might have
security implications, please hit us up at [bugbounty@uploadcare.com][uc-email-bounty]
or Hackerone.
We'll contact you personally in a short time to fix an issue through co-op and
prior to any public disclosure.
Issues and PRs are welcome. You can provide your feedback or drop us a support
request at [hello@uploadcare.com][uc-email-hello].
[demo]: https://uploadcare.github.io/uploadcare-widget-tab-effects/?utm_source=github&utm_campaign=uploadcare-widget-tab-effects
[github-home]: https://github.com/uploadcare/uploadcare-widget-tab-effects
[github-files-locales]: https://github.com/uploadcare/uploadcare-widget-tab-effects/tree/master/src/locale
[github-files-locales-index]: https://github.com/uploadcare/uploadcare-widget-tab-effects/tree/master/src/locale/index.js
[uc-email-bounty]: mailto:bugbounty@uploadcare.com
[uc-email-hello]: mailto:hello@uploadcare.com
[uc-feature-image-processing]: https://uploadcare.com/features/image_processing/?utm_source=github&utm_campaign=uploadcare-widget-tab-effects
[uc-docs-widget]: https://uploadcare.com/docs/uploads/widget/?utm_source=github&utm_campaign=uploadcare-widget-tab-effects
[uc-docs-widget-install]: https://uploadcare.com/docs/uploads/widget/install/?utm_source=github&utm_campaign=uploadcare-widget-tab-effects
[uc-docs-widget-custom-tabs]: https://uploadcare.com/docs/uploads/widget/custom_tabs/?utm_source=github&utm_campaign=uploadcare-widget-tab-effects
[uc-docs-cdn]: https://uploadcare.com/docs/delivery/?utm_source=github&utm_campaign=uploadcare-widget-tab-effects
[uc-docs-cdn-image-operations]: https://uploadcare.com/docs/processing/image/?utm_source=github&utm_campaign=uploadcare-widget-tab-effects
[uc-docs-cdn-limits]: https://uploadcare.com/docs/processing/image/limits/?utm_source=github&utm_campaign=uploadcare-widget-tab-effects
[uc-docs-uuid]: https://uploadcare.com/docs/concepts/?utm_source=github&utm_campaign=uploadcare-widget-tab-effects#cdn
[uc-docs-widget-multi-upload]: https://uploadcare.com/docs/uploads/widget/multi_upload/?utm_source=github&utm_campaign=uploadcare-widget-tab-effects
[badge-npm-img]: http://img.shields.io/npm/v/uploadcare-widget-tab-effects.svg
[badge-npm-url]: https://www.npmjs.org/package/uploadcare-widget-tab-effects
[badge-stack-img]: https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat
[badge-stack-url]: https://stackshare.io/uploadcare/stacks/
[widget-bundle-types]: https://github.com/uploadcare/uploadcare-widget#types-of-bundles