图片打码编辑器（React）
rc-image-editor
背景
需求是为了解决
- 用户上传的图片支持打码，以保护隐私信息
- 项目框架使用的是React
- 支持移动端操作和PC端操作
- 具备业务独立性
实现功能
- 多图片滑动切换查看；
- 旋转、缩放图片(支持手势)
- 马赛克涂抹
功能预览
使用方法
单图编辑示例代码
import ImageEditor from 'rc-image-edit'
<>
<img onClick={this.openEditor} src={img} alt="SRC IMAGE" /
<ImageEditor
visible={visible}
onClose={this.afterClose}
onSave={this.onSave}
data={img}
toolbar={{ mosaic: true, restore: true, downloadJpg: true, rotate: true }}
editable
/>
</>Properties & Events
| prop | type | default | description |
|---|---|---|---|
| visible | boolean | false | 编辑器是否可见 |
| onClose | () => void | – | 点击关闭按钮触发的事件 |
| onSave | (imgData) => void | – | 点击保存按钮触发的事件 |
| switchable | boolean | false | 是否允许切换浏览图片 |
| onSwitchPrev | (event) => void | – | 点击前一张图片按钮事件 |
| onSwitchNext | (event) => void | – | 点击后一张图片按钮事件 |
| data | string | – | 图片数据：url 或者dataURL |
| editable | boolean | true | 允许编辑图片 |
| toolbar | object | ||
| toolbar.mosaic | boolean | true | 打码 |
| toolbar.restore | boolean | true | 还原 |
| toolbar.downloadJpg | boolean | false | 导出Jpg下载 |
| toolbar.rotate | boolean | true | 旋转 |
