iel
image-editor-little
npm i image-editor-little
iel

image-editor-little

Simple and strong, new image editor

by SSSS

0.1.5 (see all)License:MITTypeScript:Not Found
npm i image-editor-little
Readme

image-editor

Build Status npm npm bundle size NPM

这是一个React截图工具的组件, 基本功能和微信截图相似, 因为使用了React Hooks, 所以对React的版本有一定要求,支持的功能:

  1. 截取图片,下载处理好的图片
  2. 矩形和圆形标注功能
  3. 手写功能
  4. 马赛克功能
  5. 撤销操作

后续看情况拓展功能和优化

install

yarn add image-editor-little

or

npm install -S image-editor-little

example

import ImageEditor from 'image-editor-little';

<ImageEditor
  width={500}
  height={500}
  src="https://miro.medium.com/max/3200/1*hLM2qGfy0VOTiyuyE3pOBA.png"
/>

online

image-editor-little-demo

⚠️ Iframes 禁止下载

网页截图

给网页添加截图功能, 目前不会加这个功能, 不想依赖 html2canvas

image-editor-little-demo

api

参数说明类型默认值是否必填
src图片的 srcstring-
width宽度number-
height高度number-
className自定义类名string-
imageType下载图片格式类型stringpng
locSize放大镜大小(x 10)number10
holdSize图片加载时, 占位 svg 宽高object{ w: '100vw', h: '100vh' }
onClose点击 X 触发(close: () => void) => void-
onDownload点击下载触发(close: () => void) => void-
onConfirm点击确认触发(url?: string, close?: () => void) => void-

Downloads/wk

50

GitHub Stars

16

LAST COMMIT

6mos ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

4

OPEN PRs

0
VersionTagPublished
0.1.5
latest
2yrs ago
0.1.4-beta
beta
2yrs ago
No alternatives found
No tutorials found
Add a tutorial