Effects Tab for Uploadcare Widget

Effects Tab is a custom tab for Uploadcare Widget that replaces Preview Tab and adds image-editing capabilities to the 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.

How it works

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:

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.

Requirements

Since Effects Tab is a custom tab for Uploadcare Widget, make sure to start with installing the widget.

Install

You’re free to choose from the install methods listed below.

NPM

Get Effects Tab:

npm i uploadcare-widget-tab-effects --save

And then import it in your module:

import uploadcareTabEffects from 'uploadcare-widget-tab-effects'

CDN

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>

Usage

That’s how you add Effects Tab to the widget:

uploadcare.registerTab('preview', uploadcareTabEffects)

Configuration

This section describes different ways to set which effects are allowed in the Effects Tab.

Global variables

<script>
  UPLOADCARE_EFFECTS = 'blur,sharp,grayscale'
</script>

or

<script>
  UPLOADCARE_EFFECTS = ['blur', 'sharp', 'grayscale']
</script>

Local attributes

<input type="hidden" role="uploadcare-uploader" name="content"
  data-effects="blur,sharp,grayscale"
/>

Settings object

uploadcare.start({
  effects: 'blur,sharp,grayscale',
})

or

uploadcare.start({
  effects: ['blur', 'sharp', 'grayscale'],
})

Options

Effects string|array

Global: UPLOADCARE_EFFECTS
Local: data-effects
Object key: effects

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 more comma-separated effects or an array of strings (JS only).

Available effects:

  • 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

Localization

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.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.