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.

Effects Tab gives you image-editing capabilities right in the widget. It’s a custom tab for Uploadcare Widget.

There are eight on-the-fly effects you can apply on upload: crop, rotate, enhance, sharpen, blur, mirror, flip, and grayscale.

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.

How it works

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:

https://ucarecdn.com/:UUID/-/preview/-/grayscale/-/rotate/270/

You will always have the preview operation in Effects Tab output URL due to our image processing limitations.

Requirements

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

Install

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

To start using Effects Tab, just add it to your widget:

uploadcare.registerTab('preview', uploadcareTabEffects)

Configuration

This section describes different ways to set which effects are allowed in the Effects Tab. Here is the complete list of effects supported in Effects Tab: crop, rotate, enhance, sharpen, blur, mirror, flip, and grayscale. You provide the list of effects allowed in your tab as a string holding a comma-separated sequence of their names. Another JS-only option is providing an array of strings holding effect names.

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

Localization

You can choose one of the existing tab locales or contribute a new one. This can be done by forking the main repository followed by adding a new localization file to the list.

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.