Repository includes React version and Vanilla JS adapter for standalone usage

Filerobot Image Editor

Docs • Demo • CodeSandbox • Video tutorial

The Filerobot Image Editor is the easiest way to integrate an easy-to-use image editor in your web application. Integrated with few lines of code, your users will be able to apply basic transformations like resize, crop, rotate and various filters to any image.

Demo

Features
Standalone usage
React component usage
Configuration
Filerobot Integration
Cloudimage Integration
Roadmap for the near future
Filerobot UI Family
Contributing
License

Features

Adjust

brightness, contrast, exposure, and saturation

Effects

'edge enhance', 'emboss', 'grungy', 'hazy', 'lomo', 'radial blur', 'sin city', 'tilt shift'

Filters

'cross process', 'glow sun', 'jarques', 'love', 'old boot', 'orange peel', 'pin hole', 'sepia', 'sun rise', 'vintage'

Orientation

rotate and flip (mirrow effect)

Crop

Resize

Watermark

Light theme

or use your custom color scheme

Standalone usage

Installation

Use latest CDNized plugin version

<script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.6.1/filerobot-image-editor.min.js"></script>

You may also use major version number instead of fixed version to have the latest version available.

<script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3/filerobot-image-editor.min.js"></script>

Quick start

We provide easy way to integrate image editor in your applications

<script>
    const ImageEditor = new FilerobotImageEditor();

    ImageEditor.open('https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg');
</script>

Methods

`FilerobotImageEditor(config: {}, uploadHandler: callback)`: function

Initialization of Filerobot Image Editor plugin.

`ImageEditor.open(url)`: function

Open editor modal.

url: string (required) - image url to edit

`ImageEditor.close()`: function

Close editor modal.

`ImageEditor.unmount()`: function

Destroy editor

React component usage

Installation

$ npm install --save filerobot-image-editor

Quick start

We provide easy way to integrate image editor in your applications

import React, { useState } from 'react';
import { render } from 'react-dom';
import FilerobotImageEditor from 'filerobot-image-editor';


const App = () => {
  const src = 'https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg';
  const [show, toggle] = useState(false);


  return (
    <div>
      <h1>Filerobot Image Editor</h1>

      <img src={src} onClick={() => { toggle(true) }} alt="example image"/>

      <FilerobotImageEditor
        show={show}
        src={src}
        onClose={() => { toggle(false) }}
      />
    </div>
  )
};

render(<App/>, document.getElementById('app'));

Methods/Properties

`show`: bool (required)

default: false

Trigger, to display the image editor widget.

`config`: object

Image editor config.

`onClose()`: function (required)

Callback, triggers on close image editor widget.

`onComplete()`: function (required)

Callback, triggers on complete processing image.

Configuration

`tools`: [string]

default: ['adjust', 'effects', 'filters', 'rotate', 'crop', 'resize', 'watermark']

Filerobot Image Editor tools.

config.tools = ['adjust', 'effects', 'filters', 'rotate'];

`isLowQualityPreview`: bool

default: true

Helps to improve performance of the Image Editor by applying transformations to low quality preview.

config.isLowQualityPreview = true;

`language`: string

default: 'en'

Language of interface

available languages: en (fr, de, ru are in progress), you can add translations by yourself

config.language = 'en';

`translations`: object

key/translation pairs for i18n

config.translations = {
  en: {
    'toolbar.save': 'Save',
    'toolbar.apply': 'Apply',
    ...
  }
};

See all translation keys here

`reduceBeforeEdit`: object

In order to improve performance of editing your images, you can reduce the image size before editing.

default: mode: 'manual', widthLimit: 2000px, heightLimit: 2000px

config.reduceBeforeEdit = {
    mode: 'manual',
    widthLimit: 2000,
    heightLimit: 2000
  };

`reduceBeforeEdit.mode`: string | 'manual', 'auto' - Manual mode will show a modal before editing where you can reduce size of the image. Auto mode will reduce the image in the background (saving image proportion).

`reduceBeforeEdit.widthLimit`: number - Limit of the image width

`reduceBeforeEdit.heightLimit`: number - Limit of the image height

`watermark`: object

Add watermark on the image after applying image transformations.

default: null

`watermark.url`: string - url of the logo/image

`watermark.urls`: [string] - list of url of the logo/image preset to select from in editor

`watermark.position`: string | 'center' - position of the watermark

`watermark.opacity`: number | [0-1] - opacity of the watermark

`watermark.applyByDefault`: bool - apply by default

`watermark.activePositions`: string - 'corners', 'star', 'center', 'top-row', 'center-row', 'bottom-row' - select a preset or apply an array with 9 positons [1,1,1,1,1,1,1,1,1]

`watermark.handleOpacity`: boolean - default is true, hide or show the opacity range

`watermark.fileUpload`: boolean - default is false, use file upload instead of a image URL

`watermark.imageFilter`: function - default is null, pass a function that gets the image resource before draw and return a manipulated image (pass some fancy filter on the watermark)

config.watermark = {
    url: 'https://jolipage002-global.api.airstore.io/v1/get/_/04e725a5-8605-57d5-bf9b-b161745e7720/6d3f41ddc2c1271cb4fede2b7cc8323bec97a3c69f89fd1dd881c5bb9460d9c6.png',
    position: 'center',
    opacity: 0.7
  };

`colorScheme`: string | 'dark', 'light'

default: 'dark'

Color schemes, currently available two themes: 'dark', 'light'. There is possibility to make your custom theme here

`theme`: object

Possibility to make your custom theme See the example here

example:

config.theme = {
  colors: {
    primaryBg: '#1e262c',
    primaryBgHover: '#637381',
    secondaryBg: '#263138',
    secondaryBgHover: '#34444c',
    text: '#F9FAFB',
    textHover: '#fff',
    textMute: '#aaa',
    textWarn: '#f7931e',
    secondaryBgOpacity: 'rgba(0, 0, 0, 0.75)',

    border: '#161e23',
    borderLight: '#70777f'
  }
};

`cropPresets`: object

Add custom templates for crop. See the example here

`resizePresets`: object

Add custom templates for resize. See the example here

Filerobot Integration

Upload the image in your Filerobot storage container, edit it in the Image Editor and upload the result. Deliver lightning fast over CDN.

The example of Image Editor configuration using Filerobot service can be found here.

Learn more about Filerobot

Cloudimage Integration

Point the Image Editor to your origin image URL, edit it and deliver the result lightning fast over the Cloudimage image CDN. Limited to the Cloudimage inline transformation features.

The example of Image Editor configuration using cloudimage service can be found here.

Learn more about Cloudimage

What's on the Roadmap for the near future

Features

Control image brightness, contrast, exposure, and saturation (done in v3.0.0)
Bright theme, plus possibility to make your custom theme (done in v3.0.0)
Rounds the corners of images
Mirror images effect (done in v3.0.0)
New filters and effects
Load file objects and dataURLs
Transform input images to other image formats
Easily integrate with third party libraries
Compress JPEG images via Optipress
Set to preview mode to render on top of an existing image
Watermarking (done in v3.0.0)
Configurable resize/crop templates (done in v3.0.0)
Correct degree of an image (done in v3.0.0)

Adapters

Vanilla JS (done)
React (done)
Angular
Vue
Web Component

Filerobot Image Editor

Table of contents

Features

Adjust

Effects

Filters

Orientation

Crop

Resize

Watermark

Light theme

Standalone usage

Installation

Quick start

Methods

FilerobotImageEditor(config: {}, uploadHandler: callback): function

ImageEditor.open(url): function

ImageEditor.close(): function

ImageEditor.unmount(): function

React component usage

Installation

Quick start

Methods/Properties

show: bool (required)

config: object

onClose(): function (required)

onComplete(): function (required)

Configuration

tools: [string]

isLowQualityPreview: bool

language: string

translations: object

reduceBeforeEdit: object

reduceBeforeEdit.mode: string | 'manual', 'auto' - Manual mode will show a modal before editing where you can reduce size of the image. Auto mode will reduce the image in the background (saving image proportion).

reduceBeforeEdit.widthLimit: number - Limit of the image width

reduceBeforeEdit.heightLimit: number - Limit of the image height

watermark: object

watermark.url: string - url of the logo/image

watermark.urls: [string] - list of url of the logo/image preset to select from in editor

watermark.position: string | 'center' - position of the watermark

watermark.opacity: number | [0-1] - opacity of the watermark

watermark.applyByDefault: bool - apply by default

watermark.activePositions: string - 'corners', 'star', 'center', 'top-row', 'center-row', 'bottom-row' - select a preset or apply an array with 9 positons [1,1,1,1,1,1,1,1,1]

watermark.handleOpacity: boolean - default is true, hide or show the opacity range

watermark.fileUpload: boolean - default is false, use file upload instead of a image URL

watermark.imageFilter: function - default is null, pass a function that gets the image resource before draw and return a manipulated image (pass some fancy filter on the watermark)

colorScheme: string | 'dark', 'light'

theme: object

cropPresets: object

resizePresets: object

Filerobot Integration

Cloudimage Integration

What's on the Roadmap for the near future

Filerobot UI Familiy

Contributing!

License

About

Languages

`FilerobotImageEditor(config: {}, uploadHandler: callback)`: function

`ImageEditor.open(url)`: function

`ImageEditor.close()`: function

`ImageEditor.unmount()`: function

`show`: bool (required)

`config`: object

`onClose()`: function (required)

`onComplete()`: function (required)

`tools`: [string]

`isLowQualityPreview`: bool

`language`: string

`translations`: object

`reduceBeforeEdit`: object

`reduceBeforeEdit.mode`: string | 'manual', 'auto' - Manual mode will show a modal before editing where you can reduce size of the image. Auto mode will reduce the image in the background (saving image proportion).

`reduceBeforeEdit.widthLimit`: number - Limit of the image width

`reduceBeforeEdit.heightLimit`: number - Limit of the image height

`watermark`: object

`watermark.url`: string - url of the logo/image

`watermark.urls`: [string] - list of url of the logo/image preset to select from in editor

`watermark.position`: string | 'center' - position of the watermark

`watermark.opacity`: number | [0-1] - opacity of the watermark

`watermark.applyByDefault`: bool - apply by default

`watermark.activePositions`: string - 'corners', 'star', 'center', 'top-row', 'center-row', 'bottom-row' - select a preset or apply an array with 9 positons [1,1,1,1,1,1,1,1,1]

`watermark.handleOpacity`: boolean - default is true, hide or show the opacity range

`watermark.fileUpload`: boolean - default is false, use file upload instead of a image URL

`watermark.imageFilter`: function - default is null, pass a function that gets the image resource before draw and return a manipulated image (pass some fancy filter on the watermark)

`colorScheme`: string | 'dark', 'light'

`theme`: object

`cropPresets`: object

`resizePresets`: object