H5页面如何实现二维码生成与识别二维码功能完整实现教程-H5教程-PHP中文网

H5页面如何实现二维码生成与识别二维码功能完整实现教程

穿越時空

发布： 2025-06-26 15:50:02

原创

1285人浏览过

h5页面中可通过引入第三方库实现二维码生成与识别。一、生成二维码推荐使用qrcode.js，步骤包括：1. 引入库文件；2. 创建dom容器；3. 调用方法传入内容和参数，可调整颜色、尺寸等，并支持下载保存。二、识别二维码常用jsqr或quaggajs，流程为：1. 添加video元素并调用摄像头；2. 将视频帧绘制到canvas；3. 使用jsqr解析图像数据获取结果。需注意浏览器兼容性及https环境要求。三、常见应用场景包括扫码登录、支付入口等，建议用户触发操作、优化画面清晰度，企业级应用可考虑后端处理以提升性能。

H5页面如何实现二维码生成与识别二维码功能完整实现教程

二维码在H5页面中的应用越来越广泛，比如扫码登录、分享链接、支付入口等。要实现一个完整的二维码功能，通常包括两个方向：生成二维码和识别二维码。这篇文章就来聊聊如何在H5页面中实现这两个功能。

一、如何在H5页面中生成二维码

生成二维码其实并不复杂，前端可以通过一些现成的库来快速实现，常用的有 qrcode.js 或者 jsQR（虽然这个主要用于识别，也支持生成）。

实现步骤：

引入 qrcode.js 库（可通过 CDN 加载）
创建一个用于展示二维码的 DOM 容器
调用方法传入要编码的内容和容器对象

<div id="qrcode"></div>

<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
<script>
  QRCode.toCanvas('https://example.com', {
    errorCorrectionLevel: 'H',
    width: 200,
    color: '#000000',
    background: '#ffffff'
  }, function (err, canvas) {
    if (err) throw err;
    document.getElementById('qrcode').appendChild(canvas);
  });
</script>

登录后复制

你可以根据需求调整颜色、尺寸、容错率等参数。如果是需要下载二维码图片，也可以使用 toDataURL 方法生成 base64 地址供用户保存。

二、如何在H5页面中识别二维码

识别二维码稍微复杂一点，因为它涉及到图像采集和图像处理。在移动端浏览器中，可以通过调用摄像头获取视频流，然后对画面进行解析。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

常用工具库推荐：

jsQR：纯 JS 实现的二维码解析库，适合集成到网页中
QuaggaJS：功能更强大，支持多种条码格式，但体积稍大

实现思路：

页面上添加一个 <video> 元素用于显示摄像头画面
使用 navigator.mediaDevices.getUserMedia() 获取视频流
将视频帧绘制到 canvas 上
用 jsQR 对 canvas 图像进行解析

示例代码简略如下：

<video id="video" autoplay></video>
<canvas id="canvas" style="display:none;"></canvas>

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
<script>
  const video = document.getElementById('video');
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
    .then(stream => {
      video.srcObject = stream;
    });

  function tick() {
    if (video.readyState === video.HAVE_ENOUGH_DATA) {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const code = jsQR(imageData.data, imageData.width, imageData.height);
      if (code) {
        console.log("识别结果：", code.data);
      }
    }
    requestAnimationFrame(tick);
  }

  tick();
</script>

登录后复制

需要注意的是，有些浏览器可能不支持直接访问摄像头，或者需要 HTTPS 环境才能运行。此外，在微信内置浏览器中也可能存在兼容性问题，建议做一定适配。