1.0.29 • Published 10 months ago
react-img-editor-dk v1.0.29
react-img-editor · 图像编辑器
react-img-editor 是一个图像编辑器 react 组件,支持对图片进行裁剪、涂鸦、文字编辑、马赛克处理等操作,同时支持自定义插件和灵活的样式配置。
查看 demo
✨ 特性
- 支持自由画笔、矩形、圆形、箭头、文字、马赛克的绘制
- 支持橡皮擦、撤销操作、截图和图片下载
- 支持自定义插件和工具栏配置
- 支持矩形、圆形、箭头、文字等节点的拉伸、拖拽和删除
- 支持同一页面多个组件同时存在
📦 下载
npm install react-img-editor -S
🔨 引入和使用
import ReactImgEditor from 'react-img-editor'
import 'react-img-editor/assets/index.css'
<ReactImgEditor src="https://www.w3schools.com/html/img_girl.jpg" />
🧰 API
属性 | 描述 | 类型 | 默认值 | |
---|---|---|---|---|
src | 图片 url | string | - | |
width | 画板宽度 | number? | 700 | |
height | 画板高度 | number? | 500 | |
style | 画板样式 | React.CSSProperties | - | |
plugins | 自定义的插件 | Plugin[] | [] | |
toolbar | 工具栏配置 | { items: string[] } | {items: ['pen', 'eraser', 'arrow', 'rect', 'circle', 'mosaic', 'text', ' | ', 'repeal', 'download', 'crop']} |
getStage | 获取 KonvaJS 的 Stage 对象,可用于下载图片等操作 | (stage: any) => void | ||
defaultPluginName | 默认选中的插件名称 | string? | - | |
crossOrigin | 处理跨域图片 | string? | - |
📝 TODO
- 动态加载图片
- 下载图片类型配置
- 提供插件配置项配置
- 优化自由画笔书写体验
- 国际化支持
🤝 贡献
开发
npm run start
http://localhost:8888/examples/simple.html
发布
npm run lint
npm run pub
1.0.19
12 months ago
1.0.18
12 months ago
1.0.17
12 months ago
1.0.16
12 months ago
1.0.9
12 months ago
1.0.8
12 months ago
1.0.7
12 months ago
1.0.6
12 months ago
1.0.223
11 months ago
1.0.22
12 months ago
1.0.21
12 months ago
1.0.20
12 months ago
1.0.26
11 months ago
1.0.25
11 months ago
1.0.24
11 months ago
1.0.23
11 months ago
1.0.29
10 months ago
1.0.28
10 months ago
1.0.27
10 months ago
1.0.11
12 months ago
1.0.10
12 months ago
1.0.15
12 months ago
1.0.14
12 months ago
1.0.13
12 months ago
1.0.12
12 months ago
1.0.5
12 months ago
1.0.4
12 months ago
1.0.2
12 months ago
1.0.1
12 months ago
1.0.0
12 months ago