js二维码怎么使用

JS二维码怎么使用：创建二维码、扫描二维码、解析二维码、集成到网页中。在本文中，我们将详细讨论如何使用JavaScript生成和解析二维码，并将其集成到网页中。

一、创建二维码

创建二维码是使用JavaScript生成二维码的第一步，常用的库有QRCode.js和qrcode-generator。下面是如何使用这两个库创建二维码的详细步骤。

使用QRCode.js生成二维码

QRCode.js是一个简单易用的JavaScript库，用于生成二维码。首先，我们需要在项目中引入这个库，可以通过CDN链接或者下载文件。

<script src="https://cdn.jsdelivr.net/npm/qrcodejs2@1.0.0/qrcode.min.js"></script>

然后，在HTML中创建一个容器来放置二维码，例如一个div元素：

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

接下来，在JavaScript中使用QRCode对象生成二维码：

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "https://example.com",
    width: 128,
    height: 128
});

这样就可以在网页中生成一个二维码，内容为"https://example.com"。

使用qrcode-generator生成二维码

qrcode-generator是另一个强大的二维码生成库。首先，我们同样需要引入这个库：

<script src="https://cdn.jsdelivr.net/npm/qrcode-generator/qrcode.js"></script>

然后，在HTML中创建一个容器：

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

接下来，在JavaScript中生成二维码：

var typeNumber = 4;
var errorCorrectionLevel = 'L';
var qr = qrcode(typeNumber, errorCorrectionLevel);
qr.addData('https://example.com');
qr.make();
document.getElementById('qrcode').innerHTML = qr.createImgTag();

此方法生成的二维码同样包含内容"https://example.com"。

二、扫描二维码

扫描二维码通常需要使用摄像头来捕获图像并解析二维码内容。在JavaScript中，常用的库有jsQR和html5-qrcode。

使用jsQR扫描二维码

jsQR是一个强大的JavaScript库，可以从图像数据中解析二维码。以下是使用jsQR扫描二维码的步骤。

首先，添加jsQR库：

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

然后，使用HTML5的getUserMedia API来访问摄像头：

<video id="video" width="300" height="200" style="border: 1px solid black"></video>
<canvas id="canvas" hidden></canvas>

接下来，使用JavaScript捕获视频流并解析二维码：

navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
    video.srcObject = stream;
    video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
    video.play();
    requestAnimationFrame(tick);
});
function tick() {
    if (video.readyState === video.HAVE_ENOUGH_DATA) {
        canvasElement.hidden = false;
        canvasElement.height = video.videoHeight;
        canvasElement.width = video.videoWidth;
        canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
        var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
        var code = jsQR(imageData.data, imageData.width, imageData.height, {
            inversionAttempts: "dontInvert",
        });
        if (code) {
            alert("Found QR code: " + code.data);
        }
    }
    requestAnimationFrame(tick);
}

使用html5-qrcode扫描二维码

html5-qrcode是另一个流行的库，专门用于扫描二维码。首先，添加html5-qrcode库：

<script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>

然后，在HTML中创建一个容器：

<div id="reader" style="width:300px"></div>

接下来，使用JavaScript初始化扫描器并处理结果：

function onScanSuccess(decodedText, decodedResult) {
    alert(`Scan result: ${decodedText}`);
}
var html5QrCode = new Html5Qrcode("reader");
html5QrCode.start(
    { facingMode: "environment" },
    {
        fps: 10,    // Optional, frame per seconds for qr code scanning
        qrbox: 250  // Optional, if you want bounded box UI
    },
    onScanSuccess)
.catch(err => {
    console.error(`Unable to start scanning, error: ${err}`);
});

这样就可以通过摄像头扫描二维码并获得解析结果。

三、解析二维码

解析二维码是从图像数据中提取内容的过程，通常与扫描二维码同时进行。上述的jsQR和html5-qrcode库都提供了强大的解析功能。

使用jsQR解析二维码

jsQR库不仅可以从摄像头捕获的图像中解析二维码，还可以从静态图像中解析二维码。以下是解析静态图像的示例：

var image = new Image();
image.src = 'path/to/your/qrcode.png';
image.onload = function() {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.width = image.width;
    canvas.height = image.height;
    context.drawImage(image, 0, 0, image.width, image.height);
    var imageData = context.getImageData(0, 0, image.width, image.height);
    var code = jsQR(imageData.data, imageData.width, imageData.height);
    if (code) {
        alert("Found QR code: " + code.data);
    }
};

使用html5-qrcode解析二维码

html5-qrcode库也可以从静态图像中解析二维码。以下是解析静态图像的示例：

Html5Qrcode.getCameras().then(devices => {
    if (devices && devices.length) {
        var cameraId = devices[0].id;
        var qrCodeSuccessCallback = (decodedText, decodedResult) => {
            console.log(`Code matched = ${decodedText}`, decodedResult);
        };
        var qrCodeErrorCallback = (errorMessage) => {
            console.log(`QR Code no match = ${errorMessage}`);
        };
        var html5QrCode = new Html5Qrcode("reader");
        html5QrCode.start(
            cameraId,
            {
                fps: 10,    // Optional, frame per seconds for qr code scanning
                qrbox: 250  // Optional, if you want bounded box UI
            },
            qrCodeSuccessCallback,
            qrCodeErrorCallback)
        .catch(err => {
            console.error(`Unable to start scanning, error: ${err}`);
        });
    }
}).catch(err => {
    console.error(`Unable to get cameras, error: ${err}`);
});

四、集成到网页中

将二维码生成和解析功能集成到网页中，可以通过创建一个简单的用户界面来实现。以下是一个完整的示例，展示了如何生成和扫描二维码，并在网页中显示结果。

创建HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs2@1.0.0/qrcode.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
    <script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>
</head>
<body>
    <h1>QR Code Demo</h1>
    <div>
        <h2>Generate QR Code</h2>
        <input type="text" id="text" placeholder="Enter text" />
        <button onclick="generateQRCode()">Generate</button>
        <div id="qrcode"></div>
    </div>
    <div>
        <h2>Scan QR Code</h2>
        <video id="video" width="300" height="200" style="border: 1px solid black"></video>
        <canvas id="canvas" hidden></canvas>
    </div>
    <script src="script.js"></script>
</body>
</html>

创建JavaScript文件（script.js）

// Generate QR Code
function generateQRCode() {
    var text = document.getElementById("text").value;
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: text,
        width: 128,
        height: 128
    });
}
// Scan QR Code
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
    var video = document.getElementById("video");
    var canvasElement = document.getElementById("canvas");
    var canvas = canvasElement.getContext("2d");
    video.srcObject = stream;
    video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
    video.play();
    requestAnimationFrame(tick);
});
function tick() {
    var video = document.getElementById("video");
    var canvasElement = document.getElementById("canvas");
    var canvas = canvasElement.getContext("2d");
    if (video.readyState === video.HAVE_ENOUGH_DATA) {
        canvasElement.hidden = false;
        canvasElement.height = video.videoHeight;
        canvasElement.width = video.videoWidth;
        canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
        var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
        var code = jsQR(imageData.data, imageData.width, imageData.height, {
            inversionAttempts: "dontInvert",
        });
        if (code) {
            alert("Found QR code: " + code.data);
        }
    }
    requestAnimationFrame(tick);
}

通过以上步骤，我们详细介绍了如何在JavaScript中生成、扫描和解析二维码，并将这些功能集成到网页中。通过使用QRCode.js、jsQR和html5-qrcode等库，我们可以方便地实现二维码相关的功能。希望这些内容对你有所帮助。