@scaleflex/widget-image-editor

![CodeSandbox][codeSandbox-image]

The image editor plugin provides different functionality for editing the image available in Scaleflex Media Asset Widget, gives you the possibility to add watermark, text, shapes, edit image by filters, orientations...etc.

It is required in case you need to have edit image, variants, exporting functionalities.

Usage

NPM

npm install --save @scaleflex/widget-image-editor

Yarn

yarn add @scaleflex/widget-image-editor

then

import ImageEditor from '@scaleflex/widget-image-editor'
...
...
...
scaleflexWidget.use(ImageEditor, propertiesObject)

CDN

The plugin from CDN is found inside Scaleflex global object Scaleflex.ImageEditor

const ImageEditor = window.ScaleflexWidget.ImageEditor
...
...
...
scaleflexWidget.use(ImageEditor, propertiesObject)

Plugin's styles

import '@scaleflex/widget-core/dist/style.css'
import '@scaleflex/widget-image-editor/dist/style.css'

or if you prefer the minified version

import '@scaleflex/widget-core/dist/style.min.css'
import '@scaleflex/widget-image-editor/dist/style.min.css'

The plugin's css file should be imported after the Core's css file for having the styles shown correctly.

Properties

locale

Type: object.

Default: default locales inside lib/defaultLocale.js.

Customizing some of the translations or the language's strings and replace the default locale.

forceOpenOnImgAddedToUpload

Type: boolean.

Default: false

Automatically open the image editor on adding a single image in upload panel. (Note: Upload panel must contain only 1 image).

Check the rest of the options available on filerobot-image-editor

Note: filerobot object property, would be overridden internally with your container property & SASS key generated through securityTemplateId property that are provided in @scaleflex/widget-core and cloudimage.token property's value would be the same as container unless you provided another value.