Skip to content
Effects Tab for Uploadcare Widget. Edit images in a browser.
Branch: master
Clone or download
Latest commit 3e18819 Apr 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Add free crop to demo Apr 5, 2019
scripts Fix replace rule for browser sync Mar 1, 2019
src Fix crop setting checking Apr 4, 2019
.awsrc.example
.babelrc Update build, add build to ES module. `Update package.json` Aug 21, 2017
.editorconfig Use 2 spaces instead tabs Feb 17, 2017
.eslintignore Update eslint config Feb 17, 2017
.eslintrc Update configs of linters Apr 19, 2018
.gitignore Update publish to CDN script, use `.awsrc` config file instead ENV Aug 21, 2017
.stylelintrc Add BaseView class Feb 19, 2017
AUTHORS.txt Update authors list Mar 1, 2019
CHANGELOG.md
LICENSE
README.md Fix locales and add fallback if locale doesn't exists Feb 13, 2019
package-lock.json New version: 1.4.5 Apr 5, 2019
package.json New version: 1.4.5 Apr 5, 2019

README.md

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.

NPM version  Uploadcare stack on StackShare

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

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 and add import and export your locale here.

Security issues

If you think you ran into something in Uploadcare libraries which might have security implications, please hit us up at bugbounty@uploadcare.com 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 hello@uploadcare.com.

You can’t perform that action at this time.