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 Filerobot Image Editor - Free image editor plugin for any web project đź–Ľ | Product Hunt Embed
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 the Filerobot Image Editor. Get started for free and start seeing the improvements you can get from using a image/photo editor plugin today!

Try it out!

Select one of the images or upload your image

stephen-walker-unsplash
spencer-davis-unsplash
rjoey-banks-unsplash
pietro-de-grandi-unsplash
pedro-lastra-unsplash

Select one of the implementation options:

Download

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

Implementation

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.

Implementation

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.

Implementation

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

…and you are 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

What’s on the Roadmap

Features

  • Control image brightness, contrast, exposure, and saturation
  • Bright theme, plus possibility to make your custom theme
  • Easily integrate with third party libraries
  • Compress JPEG images with Optipress
  • Load file objects and dataURLs
  • Round the corners of images
  • Mirror images effect
  • New filters and effects
  • Transform input images to other image formats
  • Set to preview mode to render on top of an existing image

Adapters

  • React
  • Vanilla JS
  • Angular
  • Vue
  • Web Component

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