BARCODE GENERATOR

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

const formats = {
  CODE128: { desc: 'CODE128 — Supports all 128 ASCII characters. Most versatile barcode format.', placeholder: 'Any text...', validate: v => v.length > 0 },
  EAN13: { desc: 'EAN-13 — 12 or 13 digits. Used worldwide for product identification.', placeholder: '5901234123457', validate: v => /^\d{12,13}$/.test(v) },
  EAN8: { desc: 'EAN-8 — 7 or 8 digits. Compact version of EAN-13 for small products.', placeholder: '96385074', validate: v => /^\d{7,8}$/.test(v) },
  UPC: { desc: 'UPC-A — 11 or 12 digits. Standard for retail in North America.', placeholder: '123456789012', validate: v => /^\d{11,12}$/.test(v) },
  CODE39: { desc: 'CODE39 — Letters A-Z, digits 0-9, and symbols (-.$/+% space). Used in logistics.', placeholder: 'HELLO-123', validate: v => /^[A-Z0-9\-\.\ \$\/\+\%]+$/i.test(v) && v.length > 0 },
  ITF14: { desc: 'ITF-14 — Exactly 14 digits. Used for shipping containers.', placeholder: '98249880215005', validate: v => /^\d{14}$/.test(v) }
};

let currentFormat = 'CODE128';

function setFormat(fmt) {
  currentFormat = fmt;
  document.querySelectorAll('.format-tab').forEach(t => t.classList.toggle('active', t.dataset.format === fmt));
  document.getElementById('formatDesc').textContent = formats[fmt].desc;
  document.getElementById('barcodeInput').placeholder = formats[fmt].placeholder;
  generateBarcode();
}

function generateBarcode() {
  const val = document.getElementById('barcodeInput').value;
  const err = document.getElementById('errorMsg');
  if (!val) { err.style.display = 'none'; clearSvg(); return; }

  if (!formats[currentFormat].validate(val)) {
    err.textContent = 'Invalid input for ' + currentFormat + ' format';
    err.style.display = 'block';
    clearSvg();
    return;
  }
  err.style.display = 'none';

  try {
    JsBarcode('#barcodeSvg', val, {
      format: currentFormat,
      width: parseInt(document.getElementById('barWidth').value),
      height: parseInt(document.getElementById('barHeight').value),
      displayValue: document.getElementById('showText').checked,
      background: '#ffffff',
      lineColor: '#000000',
      margin: 10,
      font: 'monospace',
      fontSize: 14
    });
  } catch (e) {
    err.textContent = e.message || 'Invalid input';
    err.style.display = 'block';
    clearSvg();
  }
}

function clearSvg() {
  document.getElementById('barcodeSvg').innerHTML = '';
}

function downloadPNG() {
  const svg = document.getElementById('barcodeSvg');
  if (!svg.innerHTML) return;
  const svgData = new XMLSerializer().serializeToString(svg);
  const canvas = document.createElement('canvas');
  const img = new Image();
  img.onload = () => {
    canvas.width = img.width * 2;
    canvas.height = img.height * 2;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    const a = document.createElement('a');
    a.download = 'barcode.png';
    a.href = canvas.toDataURL('image/png');
    a.click();
  };
  img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
}

function downloadSVG() {
  const svg = document.getElementById('barcodeSvg');
  if (!svg.innerHTML) return;
  const svgData = new XMLSerializer().serializeToString(svg);
  const blob = new Blob([svgData], { type: 'image/svg+xml' });
  const a = document.createElement('a');
  a.download = 'barcode.svg';
  a.href = URL.createObjectURL(blob);
  a.click();
  URL.revokeObjectURL(a.href);
}

document.getElementById('barcodeInput').value = 'toolpad.cc';
generateBarcode();