EAN-13条形码入门指南：条形码的剖析和前端实现

2024-02-08 11:04:41

在超市的结账柜台前，我们经常会看到商品上贴着一串由条纹组成的“神秘代码”——那就是条形码。其中，EAN-13条形码因其广泛的使用而在国内外备受关注。本文将深入剖析EAN-13条形码，并提供前端生成实现指南，帮助您了解和掌握这一重要的商品标识技术。

EAN-13条形码简介

EAN-13（European Article Number）是一种通用的13位条形码，广泛用于全球零售业中，以识别和跟踪各种产品。它的编码方式如下：

第1位： 国家代码，标识条形码的发行国（例如，中国为69）
第2-7位： 制造商代码，标识生产该产品的公司
第8-12位： 产品代码，标识特定产品
第13位： 校验位，用于验证条形码的准确性

EAN-13条形码的构造

EAN-13条形码由两部分组成：一组线条图案，以及一组数字字符。线条图案由不同的宽度和间距的黑色条纹和白色空格组成，代表了数字字符的信息。

前端EAN-13条形码生成

使用JavaScript，我们可以轻松地在前端生成EAN-13条形码：

function generateEAN13(code) {
  // 校验码计算
  let sum = 0;
  for (let i = 0; i < 12; i += 2) {
    sum += parseInt(code[i]);
  }
  for (let i = 1; i < 12; i += 2) {
    sum += parseInt(code[i]) * 3;
  }
  let checksum = (10 - (sum % 10)) % 10;

  // 生成条形码字符串
  let barcode = '';
  const encodings = [
    '0001101', '0011001', '0010011', '0111001', '0100011',
    '0110001', '0101111', '0111011', '0110111', '0001011'
  ];
  for (let i = 0; i < 13; i++) {
    let c = (i == 0) ? '0' : code[i - 1];
    barcode += encodings[parseInt(c)];
  }
  barcode += encodings[checksum];

  // 生成SVG图像
  return `<svg><path d="${barcode}" stroke-width="1" stroke="black" fill="white" /></svg>`;
}