Package Exports

react-img-editor-en
react-img-editor-en/es/index.js
react-img-editor-en/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-img-editor-en) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-img-editor-en Image Editor

react-img-editor-en is an image editor react component that supports cropping, graffiti, text editing, mosaic processing and other operations on images. It also supports custom plug-ins and flexible style configuration.

Example

✨ Features

Supports free brush, rectangle, circle, arrow, text, mosaic drawing
Support eraser, undo operation, screenshot and image download
Support custom plugins and toolbar configuration
Support stretching, dragging and deleting of rectangles, circles, arrows, text and other nodes
Support multiple components on the same page

📦 Download

npm install react-img-editor-en -S

🔨 Import and use

import ReactImgEditor from 'react-img-editor-en'
import 'react-img-editor-en/assets/index.css'

<ReactImgEditor src="https://www.w3schools.com/html/img_girl.jpg" />

🧰 API

Property	Description	Type	Default Value
src	image url	string	-
width	Artboard width	number?	700
height	Artboard height	number?	500
style	Artboard style	React.CSSProperties	-
plugins	Custom plugins	Plugin[]	[]
toolbar	Toolbar configuration	{ items: string[] }	{items: ['pen', 'eraser', 'arrow', 'rect', 'circle', 'mosaic', 'text', '
getStage	Get KonvaJS's Stage object, which can be used for downloading pictures and other operations	(stage: any) => void
defaultPluginName	Default selected plugin name	string?	-
crossOrigin	Handle cross-origin images	string?	-

📝 ALL

Dynamically load images
Download image type configuration
Provide plugin configuration item configuration
Optimize the free brush writing experience
Internationalization support

🤝 Contributions

Development

npm run start

http://127.0.0.1:8012/examples/simple.html

release

npm run lint
npm run pub