react-img-editor · 图像编辑器
react-img-editor 是一个图像编辑器 react 组件，支持对图片进行裁剪、涂鸦、文字编辑、马赛克处理等操作，同时支持自定义插件和灵活的样式配置。
查看 demo
✨ react-img-editor-pro 说明
项目是从 react-img-editor 分离。
- 新增插件 save 功能，抛出图片的 base64 内容
- 新增图标库，原插件图标库是固定的几个，且内网情况下无法使用，故新增了图标库。
✨ 特性
- 支持自由画笔、矩形、圆形、箭头、文字、马赛克的绘制
- 支持橡皮擦、撤销操作、截图和图片下载
- 支持自定义插件和工具栏配置
- 支持矩形、圆形、箭头、文字等节点的拉伸、拖拽和删除
- 支持同一页面多个组件同时存在
📦 下载
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', ' |
| getStage | 获取 KonvaJS 的 Stage 对象，可用于下载图片等操作 | (stage: any) => void | |
| defaultPluginName | 默认选中的插件名称 | string? | - |
| crossOrigin | 处理跨域图片 | string? | - |
📝 TODO
- [ ] 动态加载图片
- [ ] 下载图片类型配置
- [ ] 提供插件配置项配置
- [ ] 优化自由画笔书写体验
- [ ] 国际化支持