0.0.4 • Published 2 years ago
image-editor-little-fork v0.0.4
image-editor
这是一个React截图工具的组件, 基本功能和微信截图相似, 因为使用了React Hooks, 所以对React的版本有一定要求，支持的功能：
- 截取图片，下载处理好的图片
- 矩形和圆形标注功能
- 手写功能
- 马赛克功能
- 撤销操作
后续看情况拓展功能和优化
install
yarn add image-editor-littleor
npm install -S image-editor-littleexample
import ImageEditor from 'image-editor-little';
<ImageEditor
width={500}
height={500}
src="https://miro.medium.com/max/3200/1*hLM2qGfy0VOTiyuyE3pOBA.png"
/>online
⚠️ Iframes 禁止下载
网页截图
给网页添加截图功能, 目前不会加这个功能, 不想依赖 html2canvas
api
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| src | 图片的 src | string | - | 是 |
| width | 宽度 | number | - | 否 |
| height | 高度 | number | - | 否 |
| className | 自定义类名 | string | - | 否 |
| imageType | 下载图片格式类型 | string | png | 否 |
| locSize | 放大镜大小(x 10) | number | 10 | 否 |
| holdSize | 图片加载时, 占位 svg 宽高 | object | { w: '100vw', h: '100vh' } | 否 |
| onClose | 点击 X 触发 | (close: () => void) => void | - | 否 |
| onDownload | 点击下载触发 | (close: () => void) => void | - | 否 |
| onConfirm | 点击确认触发 | (url?: string, close?: () => void) => void | - | 否 |