图片标注组件（image-annotation）

基于 React + TypeScript 的 Web 图片标注组件，支持矩形、圆、箭头、文字、自由画笔等工具，提供撤销/重做、拖拽、导出、快捷键等能力。

✨ 功能特性

- 多种标注类型：矩形、圆形、箭头、文字、自由画笔
- 样式自定义：可调整标注颜色和线宽
- 交互操作：支持拖拽移动、撤销\前进操作、删除标注
- 数据导出：可导出标注后的图片以及标注数据
- 抗模糊绘制：基于 DPR 的清晰绘制，避免高清屏模糊
- 等比居中：图片在 canvas 中按原始比例居中显示
- 快捷键支持：支持键盘快捷键操作

🚀 快速开始

$3

``bash
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
``