# qr_parse

**Repository Path**: Free4K/qr_parse

## Basic Information

- **Project Name**: qr_parse
- **Description**: 一个自包含、零业务依赖的 uni-app 二维码解析页面：复制到任意项目即可用，支持扫一扫 / 相册识图纯解析、一键复制，仅依赖 jsQR。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-17
- **Last Updated**: 2026-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 二维码解析, 二维码识别, 二维码扫描, jsQR, uni-app页面

## README

<h1 align="center">uni-app 二维码解析组件</h1>

<p align="center">
  一个<b>自包含、零业务依赖</b>的二维码解析页面 —— 复制到任意 uni-app 项目即可用。<br>
  扫码 / 相册识图 → <b>纯解析展示结果</b>，不自动跳转、不拉起第三方应用，支持一键复制。
</p>

---

## 🚀 想直接体验完整工具？

如果你只是想找一个**开箱即用的二维码工具**，而不是自己搭项目 —— 微信搜索 **『LK工具箱』**,或扫码即可体验小程序

<p align="center">
  <img src="qrcode.jpg" width="240" alt="小程序码">
  <br>
  <b>微信扫一扫，立即体验 👆</b>
</p>

> 本仓库开源的是「解析」能力的独立版本；小程序内还包含生成、解析等完整功能。

👉 配套生成页：[qr_generate](https://gitee.com/Free4K/qr_generate)


---

## ✨ 功能特性

| 功能 | 说明 |
|---|---|
| 扫一扫 | 调用 `uni.scanCode`，由微信原生解码，直接返回结果 |
| 从相册选择 | 本地用 jsQR 解码，支持密集二维码 |
| 复制结果 | 一键复制到剪贴板，带成功/失败提示 |
| 扫一扫直传 | 支持其他页面跳转时带 `?scan=` 参数，自动解码展示 |
| 页面分享 | `onShareAppMessage` 内置，标题「二维码解析」，路径动态取当前路由 |

## 📸 界面预览

<p >
  <img src="view1.jpg" width="640" alt="初始状态">

<p align="center"><b>左：初始状态　·　右：解析结果</b></p>

## 📦 依赖

**唯一外部依赖**：`jsqr@1.4.0`

```bash
npm i jsqr@1.4.0
```

> 本页面已把解析所需的 JS 逻辑全部内联，复制到任意 uni-app 项目即可使用。
>
> 以下依赖均**不需要**：`qrcode-generator`、`@/utils/qrcode.js`、`clipboard.js`、`share.js`、`recent.js`。

## 🔧 快速接入

### 1. 安装依赖

```bash
npm i jsqr@1.4.0
```

### 2. 复制文件

将 `parse.vue` 复制到目标项目的页面目录，例如 `src/pages/qrcode/parse.vue`。

### 3. 注册路由

在目标项目的 `pages.json` 中注册：

```json
{
  "pages": [
    {
      "path": "pages/qrcode/parse",
      "style": {
        "navigationBarTitleText": "二维码解析"
      }
    }
  ]
}
```

### 4. （可选）扫一扫直传结果

从其他页面跳转并携带已扫描结果：

```js
uni.navigateTo({ url: '/pages/qrcode/parse?scan=' + encodeURIComponent(text) })
```

页面 `onLoad` 会自动 `decodeURIComponent` 后展示。

## 🧠 解析原理

### 两条解析入口

1. **扫一扫**（`onScanCode`）
   - `uni.scanCode` → `res.result` 直接得到解码文本。
   - 不经过任何本地像素处理，取消时静默返回。

2. **从相册选择**（`onPickImage`）
   - `uni.chooseImage` 选 1 张压缩图 → 拿到临时路径 → `parseQRCodeFromImage(path)` 本地解码。

### 本地解析流程（`parseQRCodeFromImage`）

```
uni.getImageInfo 读取宽高
        ↓
等比例缩放（宽高上限 600px）
        ↓
获取隐藏 Canvas 2D 节点（带 200ms 重试）
        ↓
canvas.createImage 加载图片 + drawImage
        ↓
getImageData 读取 RGBA 像素
        ↓
自适应二值化（0.299R+0.587G+0.114B 求亮度，min/max 取阈值）
        ↓
jsQR 解码 → 返回文本
```

> 隐藏 canvas 的 `id` 固定为 `__qr_parser__`，通过 `position: fixed; left/top: -9999px` 移出可视区，仅用于像素读取，用户无感知。

### 主要函数

| 函数 | 作用 |
|---|---|
| `getCanvas2dNode(id)` | 获取 Canvas 2D 节点 |
| `getCanvas2dNodeWithRetry(id, retries)` | 带重试的节点获取（应对节点未就绪） |
| `parseQRCodeFromImage(path)` | 图片 → 二维码文本（核心） |
| `onScanCode()` | 扫一扫入口 |
| `onPickImage()` | 相册选图入口 |
| `copyResult()` | 复制结果到剪贴板 |
| `buildShare()` | 构建分享配置（脱品牌） |
| `onLoad(options)` | 处理 `?scan=` 直传参数 |
| `onShareAppMessage()` | 页面分享 |

## ⚠️ 注意事项

1. **剪贴板隐私声明**：`copyResult` 使用了 `uni.setClipboardData`，需在微信后台「用户隐私保护指引」中声明「剪贴板」，否则调用可能报 `errno 112`。
2. **Canvas 2D 要求**：基础库需 ≥ 2.9.0（Canvas 2D API）。
3. **多端兼容**：解析逻辑基于标准 Canvas API + jsQR，微信 / 支付宝 / 百度等多端均可使用，仅需目标项目安装了 `jsqr`。
4. **编码对称性**：解析端不做二次 UTF-8 解码，`jsQR`（≥1.4）与 `uni.scanCode` 返回的已是 UTF-8 解码后的文本，避免中文乱码。
5. **「最近使用」记录**：原项目通过 `setRecent` 记录到本地 storage，本文件已移除，目标项目可自行接入。

## 💡 不想自己搭项目？

微信搜索 **『LK工具箱』**，或者扫**上方小程序码**即可体验完整版小程序（含**二维码生成**、二维码解析，图片处理工具等更多能力）。

## 📄 License

[MIT](./LICENSE) © 2026 Free4K