Image-editor-little NPM

image-editor

npm npm bundle size NPM

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

截取图片，下载处理好的图片
矩形和圆形标注功能
手写功能
马赛克功能
撤销操作

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

install

yarn add image-editor-little

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

网页截图

给网页添加截图功能, 目前不会加这个功能, 不想依赖 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`	-	否