yaokailun / react-img-editor Goto Github PK

View Code? Open in Web Editor NEW

99.0 4.0 19.0 5.31 MB

image editor

Home Page: https://yaokailun.github.io/react-img-editor/

License: MIT License

JavaScript 2.68% TypeScript 88.57% Less 8.74%

react-image-editor image-editor wechat-image konvajs canvas

react-img-editor's Introduction

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', '
getStage	获取 KonvaJS 的 Stage 对象，可用于下载图片等操作	(stage: any) => void
defaultPluginName	默认选中的插件名称	string?	-
crossOrigin	处理跨域图片	string?	-

📝 TODO

🤝 贡献

开发

npm run start

http://127.0.0.1:8012/examples/simple.html

发布

npm run lint
npm run pub

react-img-editor's People

Contributors

Stargazers

Watchers

Forkers

logtaillu lichangwei jjy05 kavience monkeydledger guangzhou coderookie262 john-blessing cloudogu eric-art-coder jazenx mzhren chad1218 ykf904839896 shnzhe lanizz wcyn sim-del

react-img-editor's Issues

正在找用konva如何实现马赛克刷的功能, 你这个效果不错, 但是增加那么多rect 不会有性能问题吗?

Bug: 文字没有办法添加到矩形选择之上

选择文字输入，在矩形之上点击之后，会选中矩形

但是可以把文字移动到矩形之上。

期望：选择文字之后，可以在矩形框内输入文字

设置visible时候，二次打开无法渲染图片

我用antd的Modal进行点击编辑，当关闭的时候，再次打开ReactImgEditor的时候，图片就无法渲染了。

<Modal
          visible={!isEmpty(editImage)}
          width={editImage?.width}
          wrapClassName={styles.edit_modal}
          onCancel={onClose}
          footer={false}
          destroyOnClose
        >
          {!isEmpty(editImage) && (
            <ReactImgEditor
              key={editImage?.url}
              src={editImage?.url}
              width={editImage?.width}
              height={editImage?.height}
              plugins={[]}
              getStage={setStage}
              crossOrigin="anonymous"
            />
          )}
          <div className={styles.image_operator}>
            <Space>
              <Button onClick={onClose}>取消</Button>
              <Button type="primary" onClick={onSave}>
                保存
              </Button>
            </Space>
          </div>
        </Modal>
`