Repository includes React version and Vanilla JS adapter for standalone usage
Learn more about Filerobot
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
Table of contents
Standalone usage
Installation
Use latest CDNized plugin version
<script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.0.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 (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