访问官网
Github
文档
Editor Preview
•
Learn more about Filerobot
•
CodeSandbox
Filerobot Image Editor (FIE)
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, flip, finetune, annotate, watermark and various filters to any image.
Demo
Features
- 📱 Touch, Mobile & Desktop Friendly.
- ⏭️ Live Comparison (Applied Operations & original).
- ⏳ History management (Undo/Redo/Reset).
- ✂️ Image Adjustment.
- 🔂 Export current design state & load it whenever you want to continue past edits Experimental
- 🎨 Image Annotating & Drawing.
- 🖼️ Watermarking & positioning.
- 🪟 Image Resizing.
- 🧊 A lot of Image Filters.
- 🌉 VanillaJS + Bridged to frameworks (React & More to support...).
- 🏗️ Easy, Focused & Simple UI for better UX.
- ➕ Ability to customize.
- 🔢 Multiple annotations selections & transformation
- 🚀 Image file on save customization.
- 🧩 ES6 library supports tree-shaking for eliminating dead code.
- 🤹🏼 And more to discover by yourself...
Contents
- Prerequisites
- Installation
- Usage/Examples
- Config
- Bridges
- Bridges docs
- Used by
- Feedback
- Contributing
- License
Prerequisites
Following prerequisites are required only in React Component installation, but they're included in CDN bundle installation and added as dependencies of other bridges/adapters packages.
All of the following libraries are required, as the plugin is depending on them in the implementation.
- react, react-dom: >= v17.0.0
- react-konva >= v17.0.1-1
- styled-components: >= v5.3.5
Compatability table (installed version of react should meet the opposite react-konva version in the table).
| react & react-dom versions | react-konva version |
|---|---|
| v17.x.x | >= v17.0.1-1 <= v17.0.2-6 |
| v18.x.x | v18.x.x |
Prerequisites Installation (Click to show)
- react, react-dom, react-konva & styled-components:
npm install --save react react-dom react-konva styled-components
Installation
NPM
React component
npm install --save react-filerobot-image-editor
VanillaJS
npm install --save filerobot-image-editor react-filerobot-image-editor
NOTE: if your npm version < 7 you don't need to install react-filerobot-image-editor .
CDN
VanillaJS only
// latest => last production version of the plugin, possible to replace with some earlier version (ex. 3.17.0) & if available will be requested
<script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js"></script>
IMPORTANT NOTE: In all installation cases you must import the font family that will be used from your side as it is not included in the library by default, the default font family used is Roboto in 2 font-weight (normal === 400 & medium === 500) which fall-backs to Arial if not found.
Just import the font in your HTML/JS file before loading the plugin whether it's Roboto or you have provided another fontFamily from
themeproperty and that's all!
Usage/Examples
React Example
import React, { useState } from 'react';
import FilerobotImageEditor, {
TABS,
TOOLS,
} from 'react-filerobot-image-editor';
function App() {
const [isImgEditorShown, setIsImgEditorShown] = useState(false);
const openImgEditor = () => {
setIsImgEditorShown(true);
};
const closeImgEditor = () => {
setIsImgEditorShown(false);
};
return (
<div>
<button onClick={openImgEditor}>Open Filerobot image editor</button>
{isImgEditorShown && (
<FilerobotImageEditor
source="https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg"
onSave={(editedImageObject, designState) =>
console.log('saved', editedImageObject, designState)
}
onClose={closeImgEditor}
annotationsCommon={{
fill: '#ff0000',
}}
Text={{ text: 'Filerobot...' }}
Rotate={{ angle: 90, componentType: 'slider' }}
Crop={{
presetsItems: [
{
titleKey: 'classicTv',
descriptionKey: '4:3',
ratio: 4 / 3,
// icon: CropClassicTv, // optional, CropClassicTv is a React Function component. Possible (React Function component, string or HTML Element)
},
{
titleKey: 'cinemascope',
descriptionKey: '21:9',
ratio: 21 / 9,
// icon: CropCinemaScope, // optional, CropCinemaScope is a React Function component. Possible (React Function component, string or HTML Element)
},
],
presetsFolders: [
{
titleKey: 'socialMedia', // will be translated into Social Media as backend contains this translation key
// icon: Social, // optional, Social is a React Function component. Possible (React Function component, string or HTML Element)
groups: [
{
titleKey: 'facebook',
items: [
{
titleKey: 'profile',
width: 180,
height: 180,
descriptionKey: 'fbProfileSize',
},
{
titleKey: 'coverPhoto',
width: 820,
height: 312,
descriptionKey: 'fbCoverPhotoSize',
},
],
},
],
},
],
}}
tabsIds={[TABS.ADJUST, TABS.ANNOTATE, TABS.WATERMARK]} // or {['Adjust', 'Annotate', 'Watermark']}
defaultTabId={TABS.ANNOTATE} // or 'Annotate'
defaultToolId={TOOLS.TEXT} // or 'Text'
/>
)}
</div>
);
}
VanillaJS Example
import FilerobotImageEditor from 'filerobot-image-editor'; // Load library from NPM
// or load from CDN as following and use (window.FilerobotImageEditor):
// <script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js"></script>
const { TABS, TOOLS } = FilerobotImageEditor;
const config = {
source: 'https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg',
onSave: (editedImageObject, designState) =>
console.log('saved', editedImageObject, designState),
annotationsCommon: {
fill: '#ff0000',
},
Text: { text: 'Filerobot...' },
Rotate: { angle: 90, componentType: 'slider' },
translations: {
profile: 'Profile',
coverPhoto: 'Cover photo',
facebook: 'Facebook',
socialMedia: 'Social Media',
fbProfileSize: '180x180px',
fbCoverPhotoSize: '820x312px',
},
Crop: {
presetsItems: [
{
titleKey: 'classicTv',
descriptionKey: '4:3',
ratio: 4 / 3,
// icon: CropClassicTv, // optional, CropClassicTv is a React Function component. Possible (React Function component, string or HTML Element)
},
{
titleKey: 'cinemascope',
descriptionKey: '21:9',
ratio: 21 / 9,
// icon: CropCinemaScope, // optional, CropCinemaScope is a React Function component. Possible (React Function component, string or HTML Element)
},
],
presetsFolders: [
{
titleKey: 'socialMedia', // will be translated into Social Media as backend contains this translation key
// icon: Social, // optional, Social is a React Function component. Possible (React Function component, string or HTML Element)
groups: [
{
titleKey: 'facebook',
items: [
{
titleKey: 'profile',
width: 180,
height: 180,
descriptionKey: 'fbProfileSize',
},
{
titleKey: 'coverPhoto',
width: 820,
height: 312,
descriptionKey: 'fbCoverPhotoSize',
},
],
},
],
},
],
},
tabsIds: [TABS.ADJUST, TABS.ANNOTATE, TABS.WATERMARK], // or ['Adjust', 'Annotate', 'Watermark']
defaultTabId: TABS.ANNOTATE, // or 'Annotate'
defaultToolId: TOOLS.TEXT, // or 'Text'
};
// Assuming we have a div with id="editor_container"
const filerobotImageEditor = new FilerobotImageEditor(
document.querySelector('#editor_container'),
config,
);
filerobotImageEditor.render({
onClose: (closingReason) => {
console.log('Closing reason', closingReason);
filerobotImageEditor.terminate();
},
});
NOTE: if you are importing the library from CDN then you could access it using
window.FilerobotImageEditorand access bothTABS & TOOLSfromwindow.FilerobotImageEditor.TABS&window.FilerobotImageEditor.TOOLS, seetabsIds.
Config
NOTE: The plugin respects the container/wrapper HTML element through CSS by having both
width&heightset100%so you could change the width/height of the plugin through adding/changing width/height of the wrapper HTML element.
Properties
source
Type: string | HTMLImageElement Required.
Supported version: +v4.0.0
Default: undefined.
The image url or an HTMLImageElement for the image which the operations/edits will be applied on.
theme
Type: object
Supported version: +v4.0.0
Default:
Theme from @scaleflex/ui deep merged with following overrides
// Overrides
{
palette: {
'bg-primary-active': '#ECF3FF',
},
typography: {
fontFamily: 'Roboto, Arial',
},
}
// Used properties in case you need to provide your custom colors/theme, you should customize those properties (all or any of them) with your color hex/name string values.
{
palette: {
'bg-secondary': '....',
'bg-primary': : '....',
'bg-primary-active': : '....',
'accent-primary': : '....',
'accent-primary-active': : '....',
'icons-primary': : '....',
'icons-secondary': : '....',
'borders-secondary': : '....',
'borders-primary': : '....',
'borders-strong': : '....',
'light-shadow': : '....',
'warning': : '....',
},
typography: {
fontFamily: : '....', // Font family string value, you should import this font in your app.
},
}
Almost you would need those 2 objects (palette values are the possible keys for palette object & typograpghy) to have the proper theme you want.
As the colors of the plugin are retrieved dynamically from the theme object, it gives you the possibility to customize the colors and font-family to yours.
NOTE: You must import the font family from your side in 2 weights (Normal === 400, Medium === 500) to have fonts work properly and show text as expected, which means
Robotois not included in the plugin by default so you must import it from your side too if you have provided another font family value through theme don't forget to import it from your side too.
tabsIds
Type: string[]
Supported version: +v4.0.0
Default: []
the tabs will be shown to the user, if empty array provided or left by default all tabs will be used otherwise the provided tabs ids would be shown.
Access the available Tabs ids & tools ids through anyway of the following
// Accessing from the CDN bundle
const { TABS, TOOLS } = window.FilerobotImageEditor;
// Accessing from React Function component lib. NPM
import ReactFilerobotImageEditor,
