当前位置：首页 > JavaScript

js实现长按二维码识别二维码

2026-03-01 08:11:20JavaScript

实现长按识别二维码的 JavaScript 方法

在移动端浏览器中，可以通过监听长按事件（touchstart 和 touchend）结合二维码图片的展示来实现长按识别功能。以下是具体实现步骤：

监听长按事件 通过设置定时器判断用户是否长按超过设定时间（如 800 毫秒），触发识别逻辑：

let pressTimer;
const qrCodeImg = document.getElementById('qrCode');

qrCodeImg.addEventListener('touchstart', (e) => {
  pressTimer = setTimeout(() => {
    recognizeQRCode(qrCodeImg.src);
  }, 800);
});

qrCodeImg.addEventListener('touchend', () => {
  clearTimeout(pressTimer);
});

// 防止滑动误触
qrCodeImg.addEventListener('touchmove', () => {
  clearTimeout(pressTimer);
});

调用系统识别功能 移动端浏览器通常会自动识别图片中的二维码，但也可以通过以下方式增强兼容性：

function recognizeQRCode(imageUrl) {
  const link = document.createElement('a');
  link.href = imageUrl;
  link.download = 'qrcode.png'; // 可选：提示下载图片
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

备选方案：使用第三方库解析

如果需在前端直接解析二维码，可使用 jsQR 库：

安装依赖：
```
npm install jsqr
```
解析二维码图片：
```
import jsQR from 'jsqr';
```

function decodeQRCode(imageElement) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = imageElement.width; canvas.height = imageElement.height; ctx.drawImage(imageElement, 0, 0);

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const code = jsQR(imageData.data, imageData.width, imageData.height);

if (code) { alert('识别结果: ' + code.data); } else { alert('未检测到二维码'); } }



### 注意事项

- 图片清晰度：二维码图片需满足最小尺寸要求（通常不小于 200x200 像素）。
- 跨域限制：若图片跨域需配置 `crossOrigin="anonymous"`。
- iOS 兼容性：部分 iOS 版本可能限制自动识别，建议增加手动提示文字。
- 备用交互：为非触摸设备提供点击事件备用方案。

js实现长按二维码识别二维码