Effects Tab for Uploadcare Widget

Effects Tab is an Uploadcare Widget addon that allows for in-browser image editing on desktop and mobile. Technically, it's a custom widget tab that replaces Preview Tab.

 

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

How it works

Image operations provided by Effects Tab are based on the capabilities of Uploadcare Image Processing. The tab outputs a CDN link holding your image UUID and 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, 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.

Demo

Check out the basic demo here.

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). You can also enable all effects by setting the option to all.

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.

Security issues

If you think you ran into something in Uploadcare libraries which might have security implications, please hit us up at [email protected] or Hackerone.

We'll contact you personally in a short time to fix an issue through co-op and prior to any public disclosure.

Feedback

Issues and PRs are welcome. You can provide your feedback or drop us a support request at [email protected].