Javascript 是一門常用的腳本語言，它能夠通過瀏覽器來識別條形碼。

比如，我們可以通過使用 jsbarcode 庫來生成一個條形碼：

<!-- 引入jsbarcode庫 -->
<script src="https://cdn.jsdelivr.net/jsbarcode/3.11.0/JsBarcode.all.js"></script>
<!-- 定義一個 div 容器 -->
<div id="barcode"></div>
<!-- 將條形碼渲染到容器中 -->
<script>
JsBarcode("#barcode", "1234567890", {
format: "ean13",
displayValue: true,
});
</script>

生成的結果如下：

接下來，我們使用 jsqr 庫來識別這個條形碼：

<!-- 引入jsqr庫 -->
<script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsqr.min.js"></script>
<!-- 定義一個 canvas -->
<canvas id="canvas" width="200" height="200"></canvas>
<!-- 將條形碼渲染到 canvas 中 -->
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("barcode").getElementsByTagName("img")[0];
ctx.drawImage(img, 0, 0);
<!-- 識別條形碼 -->
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "dontInvert",
});
console.log(code.data);
</script>

打開控制臺，可以看到輸出了識別出來的條形碼數據。

除了 jsqr 庫，我們還可以使用 QuaggaJS 庫來識別條形碼。這個庫支持多種類型的碼，包括 EAN, UPC, Code 128, Code 39, Code 93, Codabar, Interleaved 2 of 5 和 MSI。

舉個例子：

<!-- 引入QuaggaJS庫 -->
<script src="https://cdn.jsdelivr.net/npm/quagga/dist/quagga.min.js"></script>
<!-- 定義一個 div 容器 -->
<div id="inputStream" style="width: 320px; height: 240px;"></div>
<div id="result"></div>
<!-- 初始化 QuaggaJS -->
<script>
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector("#inputStream"),
constraints: {
width: 320,
height: 240,
facingMode: "environment",
},
},
decoder: {
readers: ["ean_reader"],
},
});
<!-- 監(jiān)聽識別事件 -->
Quagga.onDetected(function (result) {
console.log(result.codeResult.code);
});
<!-- 啟動 QuaggaJS -->
Quagga.start();
</script>

打開這段代碼所在的頁面，在攝像頭中對準一個條形碼，可以看到控制臺輸出了識別出來的條形碼數據。

做完這些，我們就可以使用 Javascript 來識別條形碼了。這項技術在實際應用中有很多用途，比如在商品管理、圖書管理、倉庫管理等領域。希望這篇文章能為初學者提供一些幫助。