# utools_qrcode_map

**Repository Path**: fancy171101034/utools_qrcode_map

## Basic Information

- **Project Name**: utools_qrcode_map
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-28
- **Last Updated**: 2026-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 二维码上图工具

一个基于 Vue 3 的二维码工具，支持在背景图片上添加二维码，也可以直接生成纯二维码。

## 功能特性

- 🖼️ **二维码上图**：将二维码放置到背景图片，支持拖拽调整位置，滑块精确调节
- 📱 **纯二维码生成**：批量生成多个二维码，单个直接下载 / 多个打包 ZIP
- 🎨 **样式自定义**：大小、圆角、内边距、前景色、背景色都可调节
- 🧹 **自动清理**：多行二维码输入自动去除空白、去重，抖动提示
- 🎯 **三栏布局**：左输入 / 中预览 / 右参数，一屏完成所有操作
- 🖱️ **直观交互**：拖拽二维码调整位置，支持 X/Y 快速居中
- 🌓 **主题适配**：自动适配系统深色/浅色模式

## 页面说明

### 贴图页面 (`map_qrcode`)
- 拖拽或点击上传背景图片
- 输入二维码内容（一行一个）
- 默认 X 居中，Y 在图片 70% 位置
- 可拖拽二维码调整位置，或使用滑块精确调整坐标（显示小数点后一位）
- 多个二维码自动打包 ZIP 下载

### 纯二维码页面 (`simple_qrcode`)
- 输入二维码内容（一行一个）
- 中间预览第一个二维码
- 单个直接下载 PNG，多个打包 ZIP

## 文件结构

```
src/
├── App.vue                # 入口，页面路由
├── main.js                # 应用入口
├── main.css               # 全局样式
├── map_qrcode/
│   └── index.vue          # 二维码上图页面
└── simple_qrcode/
    └── index.vue          # 纯二维码页面
```

## 开发

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build
```

## 技术栈

- Vue 3 + TypeScript + Vite
- [qrcode](https://github.com/soldair/node-qrcode) - 二维码生成
- [Element Plus](https://element-plus.org/) - UI 组件库
- JSZip - ZIP 打包
- file-saver - 文件下载

## 核心功能

1. **圆角二维码**：使用离屏 Canvas 二次处理，实现圆角 + 内边距效果
2. **预览缩放**：自动计算缩放比例，完整适配预览区域，保持居中
3. **拖拽定位**：考虑预览缩放比例计算真实坐标，支持边界限制
4. **批量处理**：多行输入自动去重清理，多个二维码批量生成打包

## 许可证

MIT