腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

一文教你用javascript實(shí)現(xiàn)條形碼和二維碼

更新時(shí)間：2023年07月03日 08:44:35 作者：前端老兵

這篇文章主要為大家介紹了如何用javascript實(shí)現(xiàn)條形碼和二維碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

條形碼和二維碼

條形碼和二維碼都是一種用于存儲(chǔ)信息的編碼系統(tǒng)，它們可以被掃描設(shè)備或圖像識(shí)別設(shè)備讀取。

1. 條形碼：

由一組垂直線條組成，線條的粗細(xì)和間距不同可以表示不同的數(shù)字或字符。
通常用于商品標(biāo)識(shí)和銷售管理，以便在商業(yè)交易過(guò)程中快速識(shí)別和檢索商品信息。
條形碼的信息容量有限，一般只能存儲(chǔ)幾十個(gè)字符或數(shù)字。
能夠被簡(jiǎn)單的掃描設(shè)備或激光掃描槍讀取。

2. 二維碼：

由一組黑白方塊組成，并以二維矩陣的形式排列。
可以存儲(chǔ)更多的信息，包括文本、網(wǎng)址、聯(lián)系方式等多種形式。
在支付、廣告、票務(wù)等領(lǐng)域得到廣泛應(yīng)用，例如手機(jī)支付、電影票和公交卡等。
具備一定的糾錯(cuò)能力，即使部分損壞也可以正確讀取。
用戶可以通過(guò)智能手機(jī)的攝像頭或?qū)Ｓ玫亩S碼掃描設(shè)備讀取二維碼。

條形碼適用于簡(jiǎn)單的標(biāo)識(shí)和數(shù)據(jù)追蹤，而二維碼則更適合存儲(chǔ)更多的信息以及實(shí)現(xiàn)更豐富的功能。

通過(guò)掃描設(shè)備或手機(jī)的攝像頭，用戶可以輕松讀取條形碼或二維碼的信息。

使用適當(dāng)?shù)能浖驊?yīng)用程序，用戶還可以生成自己的條形碼或二維碼來(lái)存儲(chǔ)個(gè)人信息或?qū)崿F(xiàn)特定功能。

在現(xiàn)代生活中，條形碼和二維碼已經(jīng)成為了非常重要的信息傳遞工具，它們都在商業(yè)和日常生活中發(fā)揮著重要的作用。

如何生成條形碼和二維碼

使用第三方庫(kù)： JsBarcode和QRCode

要使用JavaScript原生API實(shí)現(xiàn)條形碼或二維碼，您可以使用第三方庫(kù) 來(lái)處理編碼和渲染。

下面是一種使用 JsBarcode 庫(kù)生成條形碼和使用 QRCode 庫(kù)生成二維碼的示例：

首先，在HTML文件中引入相關(guān)的庫(kù)：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/jsbarcode"></script>
  <script src="https://cdn.jsdelivr.net/npm/qrcode"></script>
</head>
<body>
  <div id="barcode"></div>
  <div id="qrcode"></div>
  <script src="script.js"></script>
</body>
</html>

然后，在JavaScript文件script.js中使用這些庫(kù)來(lái)生成條形碼和二維碼：

// 生成條形碼
JsBarcode("#barcode", "1234567890", {
  format: "code128",
  width: 2,
  height: 50
});
// 生成二維碼
var qr = new QRCode(document.getElementById("qrcode"), {
  text: "Hello, World!",
  width: 128,
  height: 128
});

在上面的示例中

JsBrcode 函數(shù)用于生成條形碼，它接受一個(gè)目標(biāo)元素的選擇器，要顯示的文本以及其他選項(xiàng)（例如格式、寬度和高度）。
QRCode 類用于生成二維碼，它接受一個(gè)目標(biāo)元素作為容器，要包含的文本以及其他選項(xiàng)（例如寬度和高度）。

運(yùn)行以上代碼后，您將在頁(yè)面上看到相應(yīng)的條形碼和二維碼。

請(qǐng)注意，這些庫(kù)需要從互聯(lián)網(wǎng)上加載，因此您需要確保網(wǎng)絡(luò)連接正常。

當(dāng)然，這只是使用第三方庫(kù)生成條形碼和二維碼的一種方法。

如果您希望完全使用JavaScript原生API實(shí)現(xiàn)編碼和渲染，那么需要更復(fù)雜的處理過(guò)程。

不過(guò)，由于條形碼和二維碼的生成涉及到很多數(shù)學(xué)和圖形處理，使用第三方庫(kù)可以更方便和高效地完成任務(wù)。

不使用三方庫(kù)

如果您不想使用第三方庫(kù)，而是希望使用JavaScript原生API實(shí)現(xiàn)條形碼或二維碼，那么需要深入了解這些編碼的算法和繪圖技術(shù)。

使用JavaScript原生API生成 Code 39 條形碼

以下是一個(gè)簡(jiǎn)化的示例，僅涵蓋基本的條形碼和二維碼生成過(guò)程。

生成條形碼的基本步驟如下：

創(chuàng)建一個(gè)畫布元素，并獲取其 2D 上下文。
定義條形碼的寬度和高度。
將要編碼的數(shù)據(jù)轉(zhuǎn)換為對(duì)應(yīng)的數(shù)字?jǐn)?shù)組或字符串。
使用數(shù)字?jǐn)?shù)組或字符串生成條形碼的編碼序列。
在畫布上繪制條形碼。

以下是一個(gè)使用JavaScript原生API生成 Code 39 條形碼的示例代碼：

function generateBarcode(code, canvasId) {
  // 獲取畫布元素和 2D 上下文
  var canvas = document.getElementById(canvasId);
  var ctx = canvas.getContext('2d');
  // 定義條形碼的寬度和高度
  var barcodeWidth = 2;
  var barcodeHeight = 50;
  // Code 39 條形碼字符集和編碼規(guī)則
  var code39Chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ-. $/+%*";
  var code39Encodings = [
    "101001101101", "110100101011", "101100101011", "110110010101",
    "101001101011", "110100110101", "101100110101", "101001011011",
    "110100101101", "101100101101", "110101001011", "101101001011",
    "110110100101", "101011001011", "110101100101", "101101100101",
    "101010011011", "110101001101", "101101001101", "101011001101",
    "110101010011", "101101010011", "110110101001", "101011010011",
    "110101101001", "101101101001", "101010110011", "110101011001",
    "101101011001", "101011011001", "110010101011", "100110101011",
    "110011010101", "100101101011", "110010110101", "100110110101",
    "100101011011", "110010101101", "100110101101", "100100100101",
    "100100101001", "100101001001", "101001001001", "100101101101"
  ];
  // 轉(zhuǎn)換編碼數(shù)據(jù)
  var encodedData = "*";  // 起始字符
  for (var i = 0; i < code.length; i++) {
    var charIndex = code39Chars.indexOf(code[i]);
    if (charIndex >= 0) {
      encodedData += code39Encodings[charIndex] + "0";
    }
  }
  encodedData += "*";  // 結(jié)束字符
  // 繪制條形碼
  var posX = 0;
  for (var i = 0; i < encodedData.length; i++) {
    var barWidth = encodedData[i] === "1" ? barcodeWidth : 0;
    ctx.fillRect(posX, 0, barWidth, barcodeHeight);
    posX += barWidth;
  }
}
// 調(diào)用函數(shù)生成條形碼
var code = "1234567890";
generateBarcode(code, 'barcodeCanvas');

在上面的代碼中，我們定義了 Code 39 條形碼的字符集和編碼規(guī)則。

然后，根據(jù)輸入的編碼數(shù)據(jù)，將每個(gè)字符替換為對(duì)應(yīng)的編碼序列，并繪制條形碼的條紋。

生成二維碼的基本步驟如下：

創(chuàng)建一個(gè)畫布元素，并獲取其 2D 上下文。
定義二維碼的尺寸。
將要編碼的數(shù)據(jù)轉(zhuǎn)換為對(duì)應(yīng)的二維矩陣。
在畫布上根據(jù)二維矩陣?yán)L制黑白方塊。

這是一個(gè)簡(jiǎn)化的示例，使用JavaScript原生API生成一個(gè)簡(jiǎn)單的 QR Code 二維碼：

function generateQRCode(text, canvasId) {
  var canvas = document.getElementById(canvasId);
  var ctx = canvas.getContext('2d');
  var qrSize = 21;  // 二維碼大小
  // 創(chuàng)建二維矩陣，并初始化為白色
  var qrMatrix = [];
  for (var i = 0; i < qrSize; i++) {
    qrMatrix[i] = [];
    for (var j = 0; j < qrSize; j++) {
      qrMatrix[i][j] = 0;
    }
  }
  // 在二維矩陣中設(shè)置黑色方塊
  var textLength = text.length;
  for (var i = 0; i < textLength; i++) {
    var row = Math.floor(i / qrSize);
    var col = i % qrSize;
    qrMatrix[row][col] = text[i] === '1' ? 1 : 0;
  }
  // 繪制二維碼
  var blockSize = Math.floor(canvas.width / qrSize);
  for (var i = 0; i < qrSize; i++) {
    for (var j = 0; j < qrSize; j++) {
      ctx.fillStyle = qrMatrix[i][j] ? 'black' : 'white';
      ctx.fillRect(j * blockSize, i * blockSize, blockSize, blockSize);
    }
  }
}
// 調(diào)用函數(shù)生成二維碼
var text = "Hello, World!";
generateQRCode(text, 'qrcodeCanvas');

在上面的代碼中，我們首先創(chuàng)建了一個(gè)二維數(shù)組作為二維矩陣，并將其初始化為白色（表示空白方塊）。然后，根據(jù)輸入的文本將每個(gè)字符轉(zhuǎn)換為對(duì)應(yīng)的黑白方塊，并在畫布上繪制二維碼。

請(qǐng)注意，這些示例只是基于JavaScript原生API的簡(jiǎn)化實(shí)現(xiàn)，可能無(wú)法處理更復(fù)雜的條形碼和二維碼編碼。使用第三方庫(kù)可以更可靠和高效地生成條形碼和二維碼。

使用 JavaScript 原生 API 實(shí)現(xiàn) Code 128 條形碼

要使用 JavaScript 原生的 API 實(shí)現(xiàn)條形碼或二維碼生成，不依賴于任何庫(kù)或第三方服務(wù)，可以使用一些算法來(lái)生成對(duì)應(yīng)的圖形。

實(shí)現(xiàn)條形碼（Code 128）的基本思路是將每個(gè)字符編碼成一系列窄條和寬條的組合，然后通過(guò)繪制這些條形來(lái)生成條形碼圖像。

以下是一個(gè)使用 JavaScript 原生 API 實(shí)現(xiàn) Code 128 條形碼的示例：

// 輸入要生成的條形碼數(shù)據(jù)
var barcodeData = "YOUR_BARCODE_DATA";
// 獲取 canvas 元素
var canvas = document.getElementById("barcodeCanvas");
var context = canvas.getContext("2d");
// 設(shè)置條形碼寬度和高度
var barcodeWidth = 2;
var barcodeHeight = 80;
// 定義 Code 128 字符集
var code128Charset = {
  " ": "212222",
  "!": "222122",
  "\"": "222221",
  "#": "121223",
  "$": "121322",
  "%": "131222",
  "&": "122213",
  "'": "122312",
  "(": "132212",
  ")": "221213",
  "*": "221312",
  "+": "231212",
  ",": "112232",
  "-": "122132",
  ".": "122231",
  "/": "113222",
  "0": "123122",
  "1": "123221",
  "2": "223211",
  "3": "221132",
  "4": "221231",
  "5": "213212",
  "6": "223112",
  "7": "312131",
  "8": "311222",
  "9": "321122",
  ":": "321221",
  ";": "312212",
  "<": "322112",
  "=": "322211",
  ">": "212123",
  "?": "212321",
  "@": "232121",
  "A": "111323",
  "B": "131123",
  "C": "131321",
  "D": "112313",
  "E": "132113",
  "F": "132311",
  "G": "211313",
  "H": "231113",
  "I": "231311",
  "J": "112133",
  "K": "112331",
  "L": "132131",
  "M": "113123",
  "N": "113321",
  "O": "133121",
  "P": "313121",
  "Q": "211331",
  "R": "231131",
  "S": "213113",
  "T": "213311",
  "U": "213131",
  "V": "311123",
  "W": "311321",
  "X": "331121",
  "Y": "312113",
  "Z": "312311",
  "[": "332111",
  "\\": "314111",
  "]": "221411",
  "^": "431111",
  "_": "111224",
  "`": "111422",
  "a": "121124",
  "b": "121421",
  "c": "141122",
  "d": "141221",
  "e": "112214",
  "f": "112412",
  "g": "122114",
  "h": "122411",
  "i": "142112",
  "j": "142211",
  "k": "241211",
  "l": "221114",
  "m": "413111",
  "n": "241112",
  "o": "134111",
  "p": "111242",
  "q": "121142",
  "r": "121241",
  "s": "114212",
  "t": "124112",
  "u": "124211",
  "v": "411212",
  "w": "421112",
  "x": "421211",
  "y": "212141",
  "z": "214121",
  "{": "412121",
  "|": "111143",
  "}": "111341",
  "~": "131141",
  "DEL": "114113",
  "FNC 3": "114311",
  "FNC 2": "411113",
  "SHIFT": "411311",
  "CODE C": "113141",
  "FNC 4": "114131",
  "CODE A": "311141",
  "FNC 1": "411131",
  "Start A": "211412",
  "Start B": "211214",
  "Start C": "211232",
  "Stop": "2331112"
};
// 獲取字符對(duì)應(yīng)的 Code 128 編碼
function getCode128Encoding(character) {
  return code128Charset[character];
}
// 繪制條形碼
var x = 0;
for (var i = 0; i < barcodeData.length; i++) {
  var code = barcodeData.charAt(i);
  var encoding = getCode128Encoding(code);
  for (var j = 0; j < encoding.length; j++) {
    var barType = encoding.charAt(j);
    var barWidth = (barType === "1") ? barcodeWidth : 0;
    context.fillStyle = "#000000";
    context.fillRect(x, 0, barWidth, barcodeHeight);
    x += barcodeWidth;
  }
}

使用 JavaScript 原生 API 生成二維碼

同樣地，要生成二維碼，可以使用 JavaScript 原生 API 實(shí)現(xiàn) QR Code 的編碼和繪制。QR Code 是一種比較復(fù)雜的編碼方式，簡(jiǎn)單起見(jiàn)，

下面是一個(gè)簡(jiǎn)化的示例，用于演示基本原理：

// 輸入要生成的二維碼數(shù)據(jù)
var qrCodeData = "YOUR_QR_CODE_DATA";
// 獲取 canvas 元素
var canvas = document.getElementById("qrCodeCanvas");
var context = canvas.getContext("2d");
// 設(shè)置二維碼大小
var qrCodeSize = 128;
// 定義 QR Code 編碼方式
var qrCodeEncoding = {
  "0": "0001101",
  "1": "0011001",
  "2": "0010011",
  "3": "0111101",
  "4": "0100011",
  "5": "0110001",
  "6": "0101111",
  "7": "0111011",
  "8": "0110111",
  "9": "0001011"
  // 其他編碼參考 QR Code 規(guī)則
};
// 繪制二維碼
var x = 0;
var y = 0;
var cellSize = qrCodeSize / qrCodeData.length;
for (var i = 0; i < qrCodeData.length; i++) {
  var code = qrCodeData.charAt(i);
  var encoding = qrCodeEncoding[code];
  for (var j = 0; j < encoding.length; j++) {
    var cellType = encoding.charAt(j);
    var cellX = x + j * cellSize;
    var cellY = y + i * cellSize;
    var cellWidth = cellSize;
    var cellHeight = cellSize;
    if (cellType === "1") {
      context.fillStyle = "#000000";
    } else {
      context.fillStyle = "#ffffff";
    }
    context.fillRect(cellX, cellY, cellWidth, cellHeight);
  }
}

以上代碼提供了基本的實(shí)現(xiàn)思路，但并不是完整的條形碼和二維碼實(shí)現(xiàn)。

要生成符合相應(yīng)規(guī)范的條形碼和二維碼圖像，可能需要更復(fù)雜的算法和數(shù)據(jù)處理過(guò)程。

建議在生產(chǎn)環(huán)境中使用成熟的庫(kù)或第三方服務(wù)來(lái)生成條形碼和二維碼，以確保符合標(biāo)準(zhǔn)和支持更廣泛的功能需求。

以上就是一文教你用javascript實(shí)現(xiàn)條形碼和二維碼的詳細(xì)內(nèi)容，更多關(guān)于javascript條形碼二維碼的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: