A modern React image annotation component with beautiful UI and SVG icons
npm install @frank17008/image-annotationbash
pnpm install
`
$3
`bash
pnpm dev
`
在浏览器中打开 http://localhost:3000 查看应用。
$3
`bash
pnpm run build
`
构建后的文件将生成在 build 目录中。
📖 使用方法
$3
`jsx
import { useState } from 'react';
import { ImageAnnotation, type Annotation } from '@frank17008/image-annotation';
import '@frank17008/image-annotation/dist/index.css';
export default function App() {
const [annotations, setAnnotations] = useState([]);
return (
src="https://example.com/image.jpg"
onChange={setAnnotations}
/>
);
}
`
$3
1. 颜色选择器:选择标注线条的颜色
2. 线宽调整:调整标注线条的粗细(1-20px)
3. 工具选择:
- 矩形工具:绘制矩形标注
- 圆形工具:绘制圆形标注
- 箭头工具:绘制箭头标注
- 文字工具:添加文字标注
- 自由画笔:自由绘制任意形状
4. 操作按钮:
- 清除所有:清空画布上的所有标注
- 撤销:撤销上一次操作(支持 Ctrl+Z 快捷键)
- 前进:回退撤销操作(支持 Ctrl+Y 快捷键)
- 导出:将标注后的图片保存到本地
$3
- Delete:删除选中的标注
- Ctrl+Z:撤销上一步操作
- Ctrl+Y:重做
- Escape:取消文字输入状态
🧩 组件 API
$3
Props:
- src: string(必填)图片地址
- onChange?: (annotations: Annotation[]) => void 标注变化回调
- className?: string 父容器类名
`
🛠 技术栈
- React 18 + TypeScript
- Canvas 2D
- pnpm / tsup
``