# xglass

**Repository Path**: ns2250225/xglass

## Basic Information

- **Project Name**: xglass
- **Description**: 在线电子放大镜
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 明察 · 在线电子放大镜

一款隐私优先、完全运行在浏览器中的电子放大镜。打开摄像头后，可以实时放大药品说明、商品标签、电子元件和其他肉眼难以看清的细节。

项目不需要后端、账户或云端服务，摄像头视频只在当前设备的浏览器中处理，不会上传或保存。

## 主要功能

- 1×～10× 实时放大，优先使用摄像头原生变焦
- 滑块、快捷倍率、双指缩放和鼠标滚轮控制
- 高倍率拖动画面，双击恢复中心
- 冻结当前画面，冻结后仍可缩放、拖动和增强
- 普通、高对比、黑白、黑白高对比、反色和暖色模式
- 亮度与对比度调节
- 高倍清晰增强，自动提升采集和 Canvas 插值质量
- 持续自动对焦和点击区域对焦能力检测
- 后置/前置摄像头切换及多摄像头选择
- 支持设备补光灯，并进行能力检测
- 将当前处理后的画面导出为本地 JPG
- 竖屏、横屏、320px 小屏和桌面端响应式布局
- 极简观察模式和全屏模式
- 设置本地保存，不保存任何摄像头内容
- PWA 安装与静态资源离线缓存

## 隐私说明

应用的数据处理链路为：

```text
摄像头 → 浏览器 MediaStream → 本地 Canvas → 屏幕
```

应用不会上传视频、图片或截图，不包含服务端接口、数据库、用户系统或第三方图像处理服务。

## 技术栈

- Vue 3 Composition API
- TypeScript
- Vite
- Canvas 2D
- MediaDevices / MediaStream API
- Pointer Events
- vite-plugin-pwa / Workbox

## 本地开发

建议使用 Node.js 20 或更高版本。使用国内 npm 镜像安装依赖：

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

访问终端显示的本地地址。浏览器摄像头 API 要求页面运行于 `localhost` 或 HTTPS 安全环境。

## 构建与预览

```bash
npm run build
npm run preview
```

构建产物位于 `dist/`，可以部署到任意支持 HTTPS 的静态网站服务。

## 桌面快捷键

| 按键 | 功能 |
| --- | --- |
| `+` / `-` | 放大 / 缩小 |
| `Space` | 冻结 / 恢复 |
| `S` | 保存截图 |
| `F` | 全屏 |
| `R` | 恢复画面中心 |
| `B` | 切换黑白模式 |
| `I` | 切换反色模式 |

## 浏览器兼容性

优先支持最新版 Chrome Android、Safari iOS、Chrome 和 Edge。补光灯、原生变焦、自动对焦等能力取决于摄像头硬件及浏览器实现；应用会通过功能检测自动启用或禁用相应控制。

## 项目结构

```text
src/
├── components/       # 摄像头画布等界面组件
├── composables/      # 摄像头与设置逻辑
├── App.vue           # 主界面与交互控制
├── main.ts           # 应用入口与 PWA 注册
├── style.css         # 响应式界面样式
└── types.ts          # 共享类型定义
```

## 开源协议

本项目当前未指定开源许可证。如需分发或二次开发，请先联系仓库所有者。