图片打码编辑器(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 | 旋转 |