JavaScript实现条形码与二维码生成详解

作者：函数茶馆时间：2026-10-30 21:18:51浏览：74

本文详解如何在JavaScript中生成条形码和二维码。通过引入[[wp:a1]]和[[wp:a2]]等第三方库，可快速实现Code 128等格式编码。同时提供基于Canvas原生API的简化实现思路，涵盖Code 39与基础QR码绘制逻辑，帮助开发者理解编码原理并选择合适的技术方案。

条形码与二维码概述

条形码和二维码均属于信息存储编码系统，可通过扫描设备或图像识别设备进行读取。

1. 条形码

条形码由一组垂直线条构成，通过线条粗细和间距的变化来编码不同的数字或字符。
其常见应用场景为商品标识与销售管理，旨在商业交易过程中实现商品信息的快速识别与检索。
条形码的信息容量相对有限，通常仅能存储几十个字符或数字。
该类编码可由简单的扫描设备或激光扫描枪进行读取。

2. 二维码

二维码由黑白方块组成，并以二维矩阵的形式进行排列。
其存储容量较大，可包含文本、网址、联系方式等多种形式的信息。
二维码广泛应用于支付、广告、票务等领域，例如手机支付、电影票及公交卡等场景。
二维码具备一定纠错能力，即使部分区域损坏仍可被正确读取。
用户可通过智能手机摄像头或专用二维码扫描设备读取二维码信息。

条形码适用于简单的标识和数据追踪，而二维码则更适合存储大量信息以及实现更丰富的功能。

通过扫描设备或手机摄像头，用户可以轻松读取条形码或二维码所存储的信息。

借助适当的软件或应用程序，用户还可以生成自己的条形码或二维码，以存储个人信息或实现特定功能。

在现代生活中，条形码和二维码已成为重要的信息传递工具，在商业和日常生活中发挥着关键作用。

如何生成条形码和二维码

使用第三方库：和

若需使用JavaScript原生API实现条形码或二维码，可借助第三方库来处理编码和渲染过程。

以下示例展示了如何使用JsBarcode库生成条形码，以及使用QRCode库生成二维码。

首先，在HTML文件中引入相关库文件。

<!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中调用这些库以生成条形码和二维码。

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

在上述示例代码中：

JsBrcode函数用于生成条形码，该函数接受目标元素的选择器、待显示文本以及其他选项（如格式、宽度和高度）。
QRCode类用于生成二维码，该构造函数接受目标元素作为容器、待包含文本以及其他选项（如宽度和高度）。

运行上述代码后，页面上将显示相应的条形码和二维码图形。

需注意，这些库需从互联网加载，因此必须确保网络连接正常。

这仅是使用第三方库生成条形码和二维码的一种方法。

若希望完全使用JavaScript原生API实现编码和渲染，则需处理更复杂的逻辑。

由于条形码和二维码的生成涉及大量数学计算和图形处理，使用第三方库能更便捷高效地完成任务。

不使用三方库

若不使用第三方库而希望使用JavaScript原生API实现条形码或二维码，需深入了解相关编码算法与绘图技术。

使用JavaScript原生API生成 Code 39 条形码

以下示例仅涵盖基本的条形码和二维码生成过程，属于简化实现。

生成条形码的基本步骤如下：

创建画布元素，并获取其 2D 上下文。
定义条形码的宽度和高度参数。
将待编码数据转换为对应的数字数组或字符串。
利用数字数组或字符串生成条形码的编码序列。
在画布上绘制条形码图形。

以下示例展示了使用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 条形码字符集和编码规则
  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"
  ];
  // 转换编码数据
  var encodedData = "*";  // 起始字符
  for (var i = 0; i < code.length; i++) {
    var charIndex = code39Chars.indexOf(code[i]);
    if (charIndex >= 0) {
      encodedData += code39Encodings[charIndex] + "0";
    }
  }
  encodedData += "*";  // 结束字符
  // 绘制条形码
  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;
  }
}
// 调用函数生成条形码
var code = "1234567890";
generateBarcode(code, 'barcodeCanvas');

在上述代码中，定义了 Code 39 条形码的字符集和编码规则。

随后根据输入的编码数据，将每个字符替换为对应的编码序列，并绘制条形码的条纹。

生成二维码的基本步骤如下：

创建画布元素，并获取其 2D 上下文。
定义二维码的尺寸参数。
将待编码数据转换为对应的二维矩阵。
在画布上根据二维矩阵绘制黑白方块。

以下示例展示了使用JavaScript原生API生成简单 QR Code 二维码的代码。

function generateQRCode(text, canvasId) {
  var canvas = document.getElementById(canvasId);
  var ctx = canvas.getContext('2d');
  var qrSize = 21;  // 二维码大小
  // 创建二维矩阵，并初始化为白色
  var qrMatrix = [];
  for (var i = 0; i < qrSize; i++) {
    qrMatrix[i] = [];
    for (var j = 0; j < qrSize; j++) {
      qrMatrix[i][j] = 0;
    }
  }
  // 在二维矩阵中设置黑色方块
  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);
    }
  }
}
// 调用函数生成二维码
var text = "Hello, World!";
generateQRCode(text, 'qrcodeCanvas');

在上述代码中，首先创建二维数组作为二维矩阵并初始化为白色（表示空白方块），随后根据输入文本将每个字符转换为对应的黑白方块并在画布上绘制二维码。

需注意，这些示例仅为基于JavaScript原生API的简化实现，可能无法处理更复杂的条形码和二维码编码。使用第三方库可更可靠高效地生成条形码和二维码。

使用 JavaScript 原生 API 实现 Code 128 条形码

若不使用任何库或第三方服务，仅依赖JavaScript原生API实现条形码或二维码生成，可通过特定算法生成对应图形。

实现条形码（Code 128）的基本思路是将每个字符编码为一系列窄条和宽条的组合，随后通过绘制这些条形来生成条形码图像。

以下示例展示了使用JavaScript原生API实现 Code 128 条形码的代码。

// 输入要生成的条形码数据
var barcodeData = "YOUR_BARCODE_DATA";
// 获取 canvas 元素
var canvas = document.getElementById("barcodeCanvas");
var context = canvas.getContext("2d");
// 设置条形码宽度和高度
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"
};
// 获取字符对应的 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实现 QR Code 的编码和绘制。QR Code 编码方式较为复杂，此处仅做简化演示。

以下示例展示了用于演示基本原理的简化代码。

// 输入要生成的二维码数据
var qrCodeData = "YOUR_QR_CODE_DATA";
// 获取 canvas 元素
var canvas = document.getElementById("qrCodeCanvas");
var context = canvas.getContext("2d");
// 设置二维码大小
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 规则
};
// 绘制二维码
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);
  }
}

上述代码提供了基本的实现思路，但并非完整的条形码和二维码实现方案。

若要生成符合相应规范的条形码和二维码图像，可能需要更复杂的算法和数据处理过程。

建议在生产环境中使用成熟的库或第三方服务来生成条形码和二维码，以确保符合标准和支持更广泛的功能需求。

以上即为JavaScript实现条形码和二维码的详细内容，更多关于javascript条形码二维码的资料请关注本站其它相关文章！

作者最新文章

JS split切割后出现空字符串怎么过滤

2026-11-05 16:00:30

在 React 或 Vue 项目中封装使用 JS 节流防抖

2026-11-05 15:27:29

JavaScript中怎么将带小数的字符串转为整数？

2026-11-05 14:32:38

怎么用JavaScript策略模式重构电商促销计算逻辑？

2026-11-05 14:01:09

JS使用constructor判断数据类型可靠吗

2026-11-05 13:49:41