
这篇只讲功能层 JavaScript：同一个扫描器同时支持“图片上传识别”和“摄像头实时识别”，识别到的内容进入结果列表，并提供复制能力。

> 在线工具网址：[https://see-tool.com/qrcode-scanner](https://see-tool.com/qrcode-scanner)  
> 工具截图：  
![工具截图.png](https://developer.qcloudimg.com/http-save/yehe-1342542/dc9ac865c13d926d748f352e0037bec2.png)

识别依赖 ZXing（`@zxing/library`）的 `BrowserMultiFormatReader`，主要用到两种解码方式：

- 图片：`decodeFromImageElement(img)`
- 摄像头：`decodeFromVideoDevice(deviceId, videoEl, callback)`

下面按功能模块拆开讲核心实现。

## 1）解码器初始化：SSR 下只在客户端创建

Nuxt 有 SSR，`setup` 会先在服务器执行一次生成 HTML。服务器环境没有 `window` / `navigator`，也没有 `navigator.mediaDevices` 这类摄像头 API；而 `BrowserMultiFormatReader` 属于浏览器侧解码器，如果在服务端阶段创建，就可能触发 `window is not defined` / `navigator is undefined` 这类错误。

处理方式：把初始化放进 `onMounted`（只在浏览器端执行），并用 `process.client` 再兜底一次。

```js
import { onMounted, onUnmounted } from "vue";
import { BrowserMultiFormatReader } from "@zxing/library";

let codeReader = null;

onMounted(() => {
  if (process.client) {
    codeReader = new BrowserMultiFormatReader();
  }
});

onUnmounted(() => {
  // 离开页面时释放摄像头相关资源
  if (codeReader) codeReader.reset();
});
```

`reset()` 用于停止当前扫描流程，并释放视频流相关资源（切换模式或离开页面时会用到）。

## 2）上传识别：File -> DataURL -> Image -> decode

上传和拖拽统一走 `handleFiles(files)`：遍历文件，先过滤非图片，再逐个触发识别。

```js
const handleFiles = (files) => {
  if (!files || files.length === 0) return;

  Array.from(files).forEach((file) => {
    if (!file.type.startsWith("image/")) {
      addResult(file.name, "仅支持图片文件", "error");
      return;
    }
    scanImageFile(file);
  });
};
```

`scanImageFile` 的流程是把文件读成 DataURL，加载成 `Image`，再交给 ZXing 解码：

```js
const scanImageFile = (file) => {
  if (!codeReader) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    const img = new Image();
    img.onload = () => {
      codeReader
        .decodeFromImageElement(img)
        .then((result) => addResult(file.name, result.text, result.format))
        .catch(() => addResult(file.name, "未识别到二维码", "error"));
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
};
```

这里使用 `Image()` 的原因：先让浏览器把 DataURL 解码成像素数据，再由 ZXing 从像素中定位并识别二维码。

## 3）摄像头识别：decodeFromVideoDevice 持续回调

摄像头模式不自行做 `getUserMedia` + `canvas` 截帧，而是让 ZXing 直接接管：它会持续从视频帧中尝试识别。

```js
const isCameraActive = ref(false);
const videoElement = ref(null);

const startCamera = () => {
  if (!codeReader) return;
  isCameraActive.value = true;

  codeReader
    .decodeFromVideoDevice(null, videoElement.value, (result, err) => {
      if (result) {
        addResult("摄像头扫描", result.text, result.format);
      }
      // 识别不到时 err 往往只是“没找到”，不需要每帧都弹提示
    })
    .catch(() => {
      isCameraActive.value = false;
      addResult("摄像头", "摄像头启动失败或无权限", "error");
    });
};

const stopCamera = () => {
  if (codeReader) codeReader.reset();
  isCameraActive.value = false;
};
```

传 `null` 表示用默认摄像头；如果你自己做了设备选择，把 `deviceId` 传进去就行。

## 4）结果结构：只存“来源 + 内容 + 格式 + 时间”

结果列表使用数组保存，元素结构如下：

```js
// { source, content, format, isError, timestamp }
const results = ref([]);
```

字段都很直白：来源是“文件名/摄像头”，`content` 是解出来的文本，`format` 用来展示二维码类型，`timestamp` 用来做去重。

## 5）为什么要去重：摄像头会反复识别同一张码

摄像头模式下，二维码只要还在画面里，就可能被重复识别（可以理解为间隔很短就会再次识别）。如果每次识别成功都写入结果列表，会出现大量重复记录。

这里用“时间窗口去重”：2 秒内内容相同则跳过写入。

```js
const addResult = (source, content, format) => {
  const isError = format === "error";
  const now = Date.now();

  const recentSame = results.value.find(
    (r) => r.content === content && now - r.timestamp < 2000,
  );

  if (recentSame && !isError) return;

  let formatName = format;
  if (!isError && typeof format === "number")
    formatName = getFormatName(format);
  else if (format && format.formatName) formatName = format.formatName;

  results.value.unshift({
    source,
    content,
    format: isError ? "" : String(formatName),
    isError,
    timestamp: now,
  });
};
```

效果是：镜头对准二维码时，结果只会稳定新增一次，不会被重复记录刷屏。

## 6）格式显示：把枚举值映射成常见名字

ZXing 的 `format` 有时候是枚举数字。为了让展示更直观，这里做一个映射表，把常见值转成字符串。

```js
const getFormatName = (format) => {
  const formats = {
    11: "QR_CODE",
    5: "DATA_MATRIX",
    0: "AZTEC",
    10: "PDF_417",
  };
  return formats[format] || format;
};
```

没覆盖到的就原样返回，至少信息不会丢。


这篇只讲功能层 JavaScript：同一个扫描器同时支持“图片上传识别”和“摄像头实时识别”，识别到的内容进入结果列表，并提供复制能力。

基于 ZXing 的 Vue 在线二维码扫描器实现

这是一款基于ZXing的在线二维码扫描工具，支持图片上传识别与摄像头实时扫描双模式。识别结果自动归入列表，支持一键复制。采用Nuxt SSR优化，解码器仅在客户端初始化，避免服务端报错；摄像头模式内置2秒去重机制，防止重复识别刷屏。

前端

编程语言

这篇技术文章详细解析了如何实现一个支持图片上传和摄像头实时识别的二维码扫描工具。文章使用ZXing库的BrowserMultiFormatReader，分别通过decodeFromImageElement和decodeFromVideoDevice方法实现两种识别方式。内容涵盖解码器初始化、图片识别流程、摄像头持续识别、结果去重处理等核心功能模块的实现细节，并提供了在线工具地址和完整代码示例。

服务器

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

这篇技术文章详细解析了如何实现一个支持图片上传和摄像头实时识别的二维码扫描工具。文章使用ZXing库的BrowserMultiFormatReader，分别通过decodeFromImageElement和decodeFromVideoDevice方法实现两种识别方式。内容涵盖解码器初始化、图片识别流程、摄像头持续识别...

基于 ZXing 的 Vue 在线二维码扫描器实现-腾讯云开发者社区-腾讯云

基于 ZXing 的 Vue 在线二维码扫描器实现

基于 ZXing 的 Vue 在线二维码扫描器实现

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐