# poi

**Repository Path**: ns2250225/poi

## Basic Information

- **Project Name**: poi
- **Description**: 给图片的poi区域加上框框
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-27
- **Last Updated**: 2026-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# POI Frame Scanner

一个纯前端的图片重点框标注工具。图片仅在浏览器本地处理，不会上传到服务器。

## 功能

- 支持点击、拖拽和 `Ctrl + V` 粘贴导入 PNG、JPG、WebP 图片
- 在图片上连续添加多个扫描风格的 POI 标注框
- 支持移动、缩放、复制和删除标注框
- 内置白色、红色、黄色、蓝色语义预设
- 支持自定义框颜色和标签文字
- 支持图片缩放和平移，便于精确标注
- 支持桌面端和移动端触摸操作
- 按原图尺寸导出带标注的 PNG 图片

## 技术栈

- Vue 3
- TypeScript
- Vite
- SVG + Canvas

## 本地开发

建议使用 Node.js 20 或更高版本。

安装依赖（国内镜像）：

```bash
npm install --registry=https://registry.npmmirror.com
```

启动开发服务器：

```bash
npm run dev
```

浏览器访问：

```text
http://localhost:5173/
```

## 生产构建

```bash
npm run build
```

构建产物位于 `dist` 目录。

本地预览生产构建：

```bash
npm run preview
```

## 使用说明

1. 点击上传区域、拖入图片，或使用 `Ctrl + V` 粘贴图片。
2. 在 `ADD TARGET` 模式下拖动鼠标或手指添加标注框。
3. 点击标注框后，可以删除、复制或通过右下角控制点调整大小。
4. 从预设区域选择颜色和对应语义文字，也可以使用自定义选项。
5. 放大图片后切换到 `SELECT / MOVE` 模式，可拖动查看图片其他区域。
6. 点击 `SAVE` 导出带标注的 PNG 图片。

## 隐私

所有图片读取、标注和导出操作均在浏览器本地完成，项目不包含图片上传服务。

## 许可证

本项目暂未指定开源许可证。