rc-image-editor

https://github.com/PeterRock/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

proptypedefaultdescription
visiblebooleanfalse编辑器是否可见
onClose() => void点击关闭按钮触发的事件
onSave(imgData) => void点击保存按钮触发的事件
switchablebooleanfalse是否允许切换浏览图片
onSwitchPrev(event) => void点击前一张图片按钮事件
onSwitchNext(event) => void点击后一张图片按钮事件
datastring图片数据:url 或者dataURL
editablebooleantrue允许编辑图片
toolbarobject
toolbar.mosaicbooleantrue打码
toolbar.restorebooleantrue还原
toolbar.downloadJpgbooleanfalse导出Jpg下载
toolbar.rotatebooleantrue旋转

avatar
  Subscribe  
提醒