AirstoreJS - Image Editor

Airstore image editor plugin.

Features#

  • Super easy to set up
  • No bloated dependencies
  • Effects
  • Filters
  • Crop
  • Resize
  • Orientation

Demo#

Try out the demo!

Install#

Use latest CDNized plugin version

<script src="https://js.filerobot.com/image-editor.last.js"></script>

Add DOM element in body

<div id="airstore-image-editor"></div>

Usage#

We provide easy way to integrate Airstore image editor plugin in your applications.

window.AirstoreImageEditor.init(options)

// Init image editor
AirstoreImageEditor.init({ 
    SECRET_KEY: '0cbe9ccc4f164bf8be26bd801d53b132',
    CONTAINER_TOKEN: 'example',
    onUpload: onUploadHandler
});

// Open modal
AirstoreImageEditor.open(imageSrc);

options.SECRET_KEY: string (required)

Unique upload key.

options.CONTAINER_TOKEN: string (required)

Container name.

options.onUpload(newSrc: string): function (required)

Function to handle uploaded files.

options.ELEMENT_ID: string

Id of element in DOM.

Default value: airstore-image-editor

Example#

AirstoreImageEditor.init({
    SECRET_KEY: '0cbe9ccc4f164bf8be26bd801d53b132',
    CONTAINER_TOKEN: 'example',
    onUpload: function (newSrc) {
        const image = document.getElementById('image');
        image.src = newSrc;
        AirstoreImageEditor.close();
    }
});

const image = document.getElementById('image');
if (image) image.onclick = event => AirstoreImageEditor.open(event.target.src);