Skip to content
Edit, resize, and filter any image!
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build/2.1.0
config
examples refactoring Jun 18, 2019
projects fix problem with not visible grid on white images Jun 17, 2019
.gitignore add build into Git repo Apr 23, 2019
.npmignore refactoring Feb 25, 2019
Changelog.md refactoring Feb 25, 2019
LICENSE refactoring Feb 25, 2019
README.md Update README.md Jun 18, 2019
babel.config.js refactoring Feb 25, 2019
package.json release of new version 2.1.0 🚀 Jun 17, 2019

README.md

Repository includes React version and Vanilla JS adapter for standalone usage

Release Contributions welcome License Scaleflex team

Tweet

The Lounge

Learn more about Filerobot

Filerobot Image Editor

DocsDemoCodeSandboxVideo 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.

Filerobot Image Editor

Demo

Table of contents

Standalone usage

Installation

Use latest CDNized plugin version

<script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/2.1.0/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/2/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>

edeit on codesandbox

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'));

edeit on codesandbox

Methods/Properties

show: bool (required)

default: false

Trigger, to display the image editor widget.

config: object (required)

Image editor config.

onClose(): function (required)

Callback, triggers on close image editor widget.

onComplete(): function (required)

Callback, triggers on complete processing image.

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 (in progress)
  • Bright theme, plus possibility to make your custom theme (in progress)
  • Rounds the corners of images
  • Mirror images effect
  • 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

Adapters

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

Filerobot UI Familiy

Contributing!

All contributions are super welcome!

License

Filerobot Image Editor is provided under the MIT License

You can’t perform that action at this time.