Filerobot Image Editor
Watch Star Fork Tweet

Edit, resize, and filter any images!

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.

View on GitHub
Fork me on GitHub filerobot

Your image editor will look great everywhere

It only takes a few clicks to make your website more powerful with Filerobot Image Editor. Get started for free and start seeing the improvements you can get from using a image/photo editor plugin today!

Select one of the images or upload your's and:

stephen-walker-unsplash
spencer-davis-unsplash
rafael-saes-unsplash
pietro-de-grandi-unsplash
pedro-lastra-unsplash

Select one of the options:

Download

Edit the image in the Image Editor and download the result.

Upload (requires Filerobot account)

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

Modify (requires Cloudimage account)

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.

Ready to get started?

In the implementation example below you can edit the image in the Image Editor and download the result. Check out the integration guides with Filerobot and Cloudimage

Install Filerobot image editor via npm 

npm i filerobot-image-editor --save

Simple usage 

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


class App extends Component {
  constructor() {
    super();

    this.state = {
      isShow: false,
      imgSrc: 'https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg'
    }
  }

  showImageEditor = () => {
    this.setState({ isShow: true });
  }

  onClose = () => {
    this.setState({ isShow: false });
  }

  render() {
    const { imgSrc, isShow } = this.state;

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

        <img src={imgSrc} onClick={this.showImageEditor} alt="example image"/>

        <FilerobotImageEditor
           show={isShow}
           src={imgSrc}
           onClose={this.onClose}
        />
      </div>
    )
  }
}

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

Get your Filerobot tokens here.

…and you're done! See the full documentation here.

edeit on codesandbox

Include the following script into your project 

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

Initialize Filerobot Image Editor 

<script/>

  const ImageEditor = new FilerobotImageEditor();
...

Open Filerobot Image Editor passing the image url which should be edited 

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

…and you're done! Visit the full documentation here.

edeit on codesandbox

Any questions?

Contact us at hello@filerobot.com, our experts will be happy to help!

Filerobot UI family:
  • JS Cloudimage Responsive
  • React Cloudimage Responsive
  • Angular Cloudimage Responsive
  • JS Cloudimage 360 view
  • Filerobot Uploader
Made with ❤ in 2019 in Paris, Munich and Sofia by the Scaleflex team, the guys behind Cloudimage.io.
Powered by Filerobot. All rights reserved.
  • View GitHub
  • Current Issues
  • Documentation

Your edited image

result image after editing

Enter your email to get in touch with our team and learn more about Filerobot