当前位置：首页 > JavaScript

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

2026-04-04 08:48:17JavaScript

实现长按识别二维码的功能

在JavaScript中实现长按识别二维码的功能，通常需要结合HTML5的触摸事件和二维码解析库。以下是具体实现方法：

监听长按事件

使用touchstart和touchend事件来检测长按动作。设置一个计时器来判断是否达到长按时间阈值。

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

let pressTimer;
const qrCodeElement = document.getElementById('qr-code');

qrCodeElement.addEventListener('touchstart', function(e) {
    pressTimer = setTimeout(function() {
        recognizeQRCode(qrCodeElement);
    }, 1000); // 1秒长按阈值
    e.preventDefault();
});

qrCodeElement.addEventListener('touchend', function() {
    clearTimeout(pressTimer);
});

识别二维码内容

使用第三方库如jsQR来解析二维码图片。需要将图片数据转换为图像数据供库解析。

function recognizeQRCode(element) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();

    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 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('未识别到二维码');
        }
    };

    img.src = element.src;
}

引入jsQR库

在HTML中引入jsQR库，可以通过CDN方式添加：

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

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>

处理移动端兼容性

针对不同移动设备优化触摸事件处理，防止默认行为干扰长按识别。

qrCodeElement.addEventListener('touchmove', function(e) {
    clearTimeout(pressTimer);
    e.preventDefault();
});

完整示例代码

整合上述代码的完整HTML示例：

<!DOCTYPE html>
<html>
<head>
    <title>长按识别二维码</title>
    <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
</head>
<body>
    <img id="qr-code" src="your-qr-code.png" alt="QR Code">

    <script>
        let pressTimer;
        const qrCodeElement = document.getElementById('qr-code');

        qrCodeElement.addEventListener('touchstart', function(e) {
            pressTimer = setTimeout(function() {
                recognizeQRCode(qrCodeElement);
            }, 1000);
            e.preventDefault();
        });

        qrCodeElement.addEventListener('touchend', function() {
            clearTimeout(pressTimer);
        });

        qrCodeElement.addEventListener('touchmove', function(e) {
            clearTimeout(pressTimer);
            e.preventDefault();
        });

        function recognizeQRCode(element) {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const img = new Image();

            img.onload = function() {
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 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('未识别到二维码');
                }
            };

            img.src = element.src;
        }
    </script>
</body>
</html>