在現代互聯網的世界里，二維碼已成為一個不可或缺的工具。

前幾年，在使用二維碼的網站和應用中，我們不得不使用第三方的服務來生成和存儲二維碼。但如今，JavaScript已成為一種強大的編程語言，它可以很容易地生成和處理二維碼。 在本文中，我們將深入探討使用JavaScript來生成二維碼圖像。

JavaScript二維碼生成器

首先，我們需要使用一個JavaScript庫來生成二維碼圖像。 目前，有許多JS庫可用于生成二維碼，例如jsqrcode、qrcode.js和jekyll-qrcode，本文將使用qrcode.js作為例子。Qrcode.js 是一個用 JavaScript 編寫的二維碼生成器，它可以將任意字符串轉換為二維碼圖像。

var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "Hello World!",
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});

上述代碼通過從DOM中獲取元素的ID，將文本字符串轉換為一個256x256像素的黑白二維碼圖像，并將其渲染到頁面上。

JavaScript二維碼掃描

當用戶打開帶有二維碼圖像的網頁時，他們有兩種方法可以通過JavaScript掃描二維碼圖像。

方法1：使用用戶的攝像頭

在現代瀏覽器中，攝像頭API已成為Web開發中的標準應用程序接口之一。 此API使我們可以訪問用戶的計算機上可用的任何攝像頭。

navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: "environment" } })
.then(function (stream) {
var canvasElement = document.getElementById("canvas");
var videoElement = document.querySelector("video");
videoElement.srcObject = stream;
videoElement.play();
requestAnimationFrame(tick);
function tick() {
canvasElement.width = videoElement.videoWidth;
canvasElement.height = videoElement.videoHeight;
canvasElement
.getContext("2d")
.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
requestAnimationFrame(tick);
}
});

上述代碼使用 getUserMedia() 方法，獲取環境攝像頭的視頻和音頻流并將其傳遞給 video 元素進行播放。captureStream() 方法則捕獲 video 元素的音頻和視頻軌道并將其傳遞給MediaRecorder API。

方法2：使用遠程服務器

用戶也可以使用遠程服務器來掃描二維碼。您可以使用 WebSocket API 與遠程服務器進行通信，并發送您要掃描的二維碼圖像。示例代碼如下：

var blob = canvas.toBlob();
var ws = new WebSocket("ws://localhost:8080/qrcode");
ws.onopen = function() {
ws.send(blob);
};
ws.onmessage = function(event) {
console.log(event.data);
};

上面的代碼通過WebSocket API與遠程服務器建立連接，并將二維碼圖像轉換為Blob對象發送給服務器。服務器將掃描并返回結果，以實現掃描二維碼的功能。

結論

JavaScript已成為構建交互式Web應用程序的強大工具之一，同時也成為生成和處理二維碼圖像的方法。本文介紹了如何使用qrcode.js生成二維碼圖像，并使用攝像頭API和WebSocket API掃描二維碼圖像。我們希望，這些示例代碼可以幫助您更好地了解如何在JavaScript中使用二維碼。