react-filerobot-image-editor
Advanced tools
<img src="https://assets.scaleflex.com/Marketing/Logos/Filerobot+Logos/Logo+with+Scaleflex/LOGO+WITH+SCALEFLEX+ON+BLACK+BG.png?vh=619469" alt="Filerobot dark mode Logo
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.
GIF Link
> Following requirements required only in NPM installation, but they're included in CDN bundle installation.
npm install --save react react-dom or use their CDN.npm install --save styled-components or use their CDN.npm install --save react-filerobot-image-editor
npm install --save filerobot-image-editor
VanillaJS only
<script src=""></script>
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
image="https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg"
onClose={closeImgEditor}
annotationsCommon={{
fill: '#ff0000'
}}
Text={{ text: 'Filerobot...' }}
tabs={[TABS.ADJUST, TABS.ANNOTATE, TABS.WATERMARK]} // or {['Adjust', 'Annotate', 'Watermark']}
defaultTabId={TABS.ANNOTATE} // or 'Annotate'
defaultToolId={TOOLS.TEXT} // or 'Text'
/>
)}
</div>
);
}
import FilerobotImageEditor, { TABS, TOOLS } from 'filerobot-image-editor';
const config = {
image: 'https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg',
annotationsCommon: {
fill: '#ff0000'
},
Text: { text: 'Filerobot...' },
tabs: [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);
filerobotImageEdtior.terminate();
}
});
Important 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.
imageType: string | HTMLImageElement Required.
Default: undefined.
The image url or an HTMLImageElement which the operations will be applied on.
tabsIdsType: string[]
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.
defaultTabIdType: string
Default: Adjust
The default opened tab once the user opens the plugin.
defaultToolIdType: string
Default: first tool of the default opened tab.
The default opened tool once the user opens the plugin, and must be one of the tools related to the opened tab.
useBackendTranslationsType: boolean
Default: true
A backend service that hosts the translations of the plugin to be able to change the translations without making a new build once the translations changed, and gives the change to support more languages too, if true the service would be used and the next language property used in determining which language to show, false means avoid using this service in that case default translations and provided translations property will be used.
languageType: string
Default: en
The 2 letters shorthand used for the language/translations, would be used in case useBackendTranslations is true.
translationsType: object
Default: null
If provided will be used in overriding the default translations arrived locally with the plugin but it will NOT override the backend's translations if useBackendTranslations.
avoidChangesNotSavedAlertOnLeaveType: boolean
Default: false
By default once the user makes any change/edit on the image and hasn't saved the image yet and tried to leave the page before saving then a browser's confirmation would be shown asking him if he really wants to leave before saving, true means it won't be shown.
showBackButtonType: boolean
Default: false
If true Close button on the top right will be hidden and back button will be shown on the top left (with replacing positions of save & history buttons).
defaultSavedImageTypeType: string
Default: png
The default type used and selected in saving the image (the user has the possibility to change it from the saving modal).
forceToPngInEllipticalCropType: boolean
Default: false
If true then the saved image's type will always be png type if the user made an elliptical crop for preserving the transparency even if the user chose another extension in the saving modal, otherwise the familiar behavior (defaultSavedImageType or user's selected types) wins.
loadableDesignState ExperimentalType: object
Default: null
If provided the plugin will load this design state at the initial load to give the possibility to get back to that design in another time and continue editing it.
annotationsCommonType: object
Default:
{
fill: '#000000',
stroke: '#000000',
strokeWidth: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
shadowColor: '#000000',
shadowOpacity: 1,
opacity: 1,
}
The common options existed in all the annotations tools and used as default values.
| Property | Type | Default | Description |
|---|---|---|---|
| fill | string | '#000000' | The filled color for any added annotation |
| stroke | string | '#000000' | The stroke color for any added annotation |
| strokeWidth | number | 0 | The stroke width for any added annotation |
| shadowOffsetX | number | 0 | The horizontal/X shadow offset from its base annotation |
| shadowOffsetY | number | 0 | The vertical/Y shadow offset from its base annotation |
| shadowBlur | number | 0 | Blur value of the shadow added to the annotation |
| shadowColor | string | '#000000' | The color of the shadow added to the annotation |
| shadowOpacity | number | 1 | Transparency/Opacity value for the shadow of annotation |
| opacity | number (0 - 1) | 1 | Transparency/Opacity value for the whole annotation |
TextType: object
Default:
{
...annotationsCommon,
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
fontFamily: 'Arial',
fonts: [
{ label: 'Arial', value: 'Arial' },
'Tahoma',
'Sans-serif',
{ label: 'Comic Sans', value: 'Comic-sans' },
],
fontSize: 14,
letterSpacing: 0,
lineHeight: 1,
align: 'left',
fontStyle: 'normal',
}
The options available for the text annotation tool in additon to the annotationsCommon property,
| Property | Type | Default (possible values) | Description |
|---|---|---|---|
| text | string | 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' | The placeholder text added on adding a new text annotation |
| fontFamily | string | 'Arial' | The font family used for the text |
| fonts | (strings | objects)[] | mentioned above | The fonts available to the user to choose from while adding text |
| fontSize | number | 14 | The default size of the text added |
| letterSpacing | number | 0 | The spaces/paddings between letters of the text |
| lineHeight | number | 1 | Height of each line of the added text |
| align | string | 'left' ('left' | 'center' | 'right') | The horizontal alignment of the added text |
| fontStyle | string | 'normal' ('normal' | 'bold' | 'italic' | 'bold italic') | The font style & weight of text added |
Fonts must be loaded from your side in implementation to take effect as it is not guaranteed that the user has the font on his system.
ImageType: object
Default:
{
...annotationsCommon,
fill: undefined,
}
The options available for image annotation tool in additon to the annotationsCommon property,
| Property | Type | Default (possible values) | Description |
|---|---|---|---|
| fill | string | undefined | The color fills the image's transparent parts |
RectType: object
Default:
{
...annotationsCommon,
cornerRadius: 0,
}
The options available for Rect annotation tool in additon to the annotationsCommon property,
| Property | Type | Default (possible values) | Description |
|---|---|---|---|
| cornerRadius | number | 0 | The radius of the rectangle's corners |
EllipseType: object
Default: annotationsCommon
No specific options available for ellipse only the annotationsCommon are used for ellipse and you could override any of them for ellipse only by passing them here.
PolygonType: object
Default:
{
...annotationsCommon,
sides: 3,
}
The available options for polygon annotation tool in additon to the annotationsCommon property,
| Property | Type | Default (possible values) | Description |
|---|---|---|---|
| sides | number | 3 | Number of sides considered by default for the added polygon |
PenType: object
Default:
{
...annotationsCommon,
strokeWidth: 1,
}
No specific options available for pen tool only the annotationsCommon are used and you could override any of them for pen only by passing them here.
LineType: object
Default:
{
...annotationsCommon,
lineCap: 'butt',
strokeWidth: 1,
}
The available options for line annotation tool in additon to the annotationsCommon property,
| Property | Type | Default (possible values) | Description |
|---|---|---|---|
| lineCap | string | 'butt' ('butt' | 'round' | 'square') | The start & end borders line cap |
ArrowType: object
Default:
{
...annotationsCommon,
strokeWidth: 6,
lineCap: 'butt',
pointerLength: undefined,
pointerWidth: undefined,
}
The available options for arrow annotation tool in additon to the annotationsCommon property,
| Property | Type | Default (possible values) | Description |
|---|---|---|---|
| lineCap | string | 'butt' ('butt' | 'round' | 'square') | The border line cap |
| pointerLength | number | undefined | Length of the arrow's pointer in px |
| pointerWidth | number | undefined | Width of the arrow's pointer in px |
WatermarkType: object
Default:
{
...(config[TOOLS.TEXT || TOOLS.IMAGE]), // depends on the added watermark type the config will be used
gallery: [],
}
The available options for watermark tool, the watermark is using the options of text and image annotation tools mentioned above depending on the watermark chosen,
| Property | Type | Default (possible values) | Description |
|---|---|---|---|
| gallery | string[] | [] | Watermark images urls which are considered to show a list of available watermarks to be used by the user directly from watermark tab |
CropType: object
Default:
{
minWidth: 14,
minHeight: 14,
maxWidth: null,
maxHeight: null,
ratio: 'original',
noPresets: false,
}
The available options for crop tool,
| Property | Type | Default (possible values) | Description |
|---|---|---|---|
| minWidth | number | 14 | Minimum width (in px) of the possible crop area |
| minHeight | number | 14 | Minimum height (in px) of the possible crop area |
| maxWidth | number | null | Maximum width (in px) of the possible crop area |
| maxHeight | number | null | Maximum height (in px) of the possible crop area |
| ratio | string | number | 'original' ('original' | 'ellipse' | 'custom' | number) | Default ratio of the crop area |
| noPresets | boolean | false | hides the crop presets if true |
Please note the letters-case of the above properties.
onBeforeSaveType: function(imageFileInfo) {}
Default: undefined
This function will be fired once the user clicks save button and before triggering the default saving behavior...
If the function returned
falsethen the default saving behavior implemented in the plugin won't be triggered.
onSaveType: function(imageObject, imageDesignState) {} Required
Default: undefined
Must be provided for avoiding plugin's error, it's used for handling the save functionality which is triggered once the user clicks on save button of the saving modal or once clicking the save button if the default behavior is prevented from onBeforeSave function.
onCloseType: function(closingReasons) {}
Default: undefined
Triggered once the user clicks either close/cancel button or back button, if not provided then the closing button won't shown at all.
render(additionalConfig)Initializes/rerenders the plugin with the possibility to provide an additional config properties to the previously provided properties to the same plugin's instance.
terminate()Unmounts the plugin's container from the page to be removed.
This project is used by the following companies:
Fork the repoistory, Append your company's name with the url in above format inside the README.md file and make a PR.
Create an issue on github repo. and mention the details there.
Filerobot Image Editor is provided under MIT License
FAQs
React component version of filerobot image editor (FIE).
The npm package react-filerobot-image-editor receives a total of 1,544 weekly downloads. As such, react-filerobot-image-editor popularity was classified as popular.
We found that react-filerobot-image-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.