Image editor for jQuery uploading widget

  • We’re building the next version of Cloud Image Editor. Check it out.

Editing images right in a browser is the closest path for your app to receive better images. And those, in turn, provide higher engagement rates and conversions. The quality of visuals becomes an even greater concern when you want to perfect images sent by your users before they get to your site or app.

Uploadcare features a custom tab for the jQuery widget that allows enhancing and editing images in any browser, mobile included. The tab is called Effects Tab.

There are nine on-the-fly effects you can apply right in the Uploading Widget UI: crop, rotate, enhance, sharpen, blur, mirror, flip, grayscale, and invert.

You can configure which effects are enabled and change the tab behavior in other ways.

How it works

Image operations available for applying in the Uploading Widget dialog are based on our image processing operations. Effects Tab outputs a CDN URL holding image UUIDs and operations applied by a user while editing in form of URL directives.

Technically, every image first gets to your Uploadcare project. Then we show an image preview in the Uploading Widget dialog via a CDN URL provided on file upload. When a user applies image processing operations, we inject the corresponding URL directives. Once the editing is complete, Effect Tab outputs the new CDN URL which includes all the applied operations.

For example, if a user chose to apply grayscale and clicked rotate once, here is what we will get in the output:

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

Note the preview operation will appear in the output URL by default due to the image processing operation limitations.

Requirements

In-browser image editing is carried out via a custom Uploading Widget tab called Effects Tab.

The only requirement is integrating Uploadcare Uploading Widget before using Effects Tab.

Install

Choose from the install methods listed below.

NPM

Get Effects Tab:

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

Import the tab it in your module:

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

CDN

You can either install the minified Effects Tab version:

<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.min.js" charset="utf-8"></script>html

Or go with a bundled version without minification:

<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.js" charset="utf-8"></script>html

Usage

Start using Effects Tab by adding it to your Uploading Widget:

uploadcare.registerTab('preview', uploadcareTabEffects)javascript

Configuration

There are multiple ways to configure the set of effects enabled in Effects Tab.

Global Variables

You can either go with a string holding coma-separated effect names:

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

or use another approach:

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

Local Attributes

The set of enabled effects for a specific Uploading Widget instance can be controlled via the data-effects attribute.

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

Settings Object

Following the Uploading Widget concept, the allowed effects can be provided as the settings object.

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

or

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

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 will always placed 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

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.