JS and Barcode Generation Demo

1. Basic Barcode Call

Code:

<svg id="barcode-basic"></svg>

<script>
JsBarcode("#barcode-basic", "iam zhangxinxu");
</script>

Result:

Barcode text

2. SVG, Canvas, and IMG Targets

Code:

<svg id="barcode-svg"></svg>
<canvas id="barcode-canvas"></canvas>
<img id="barcode-img" alt="Generated barcode">

<script>
JsBarcode("#barcode-svg", "SVG-12345");
JsBarcode("#barcode-canvas", "CANVAS-12345");
JsBarcode("#barcode-img", "IMG-12345");
</script>

Result:

SVG

Canvas

IMG

3. Style Parameters

Code:

<svg id="barcode-styled"></svg>

<script>
JsBarcode("#barcode-styled", "STYLE-2026", {
  width: 2,
  height: 100,
  displayValue: true,
  fontSize: 20,
  background: "#ffffff",
  lineColor: "#000000",
  margin: 10
});
</script>

Result:

Width Height Font size Line color Background Text

4. Common Options Table

Code:

const options = [
  { option: "format", defaultValue: "auto", type: "String" },
  { option: "width", defaultValue: "2", type: "Number" },
  { option: "height", defaultValue: "100", type: "Number" },
  { option: "displayValue", defaultValue: "true", type: "Boolean" },
  { option: "lineColor", defaultValue: "#000000", type: "CSS color" }
];

renderOptionTable(document.getElementById("options-table"), options);

Result:

5. A Barcode Can Become a Dashed Divider

Code:

<div id="barcode-divider" class="barcode-divider"></div>

<script>
const dividerPattern = barcodeDataUrl("ZHANGXINXU", {
  width: 1,
  height: 1,
  displayValue: false,
  margin: 0
});

document.getElementById("barcode-divider").style.backgroundImage =
  `url("${dividerPattern}")`;
</script>

Result:

A one-pixel-tall barcode can read as a designed dashed rule rather than an obvious code.

Change the hidden text and the divider pattern changes.

Hidden text

6. Barcode-Like Watermark in Random Stripes

Code:

<div class="watermark-zone">
  <div id="hidden-barcode" class="hidden-barcode"></div>
</div>

<script>
document.getElementById("hidden-barcode").style.backgroundImage =
  `url("${barcodeDataUrl("WEB-WATERMARK", {
    width: 1,
    height: 10,
    displayValue: false,
    margin: 0,
    lineColor: "#1e293b",
    background: "transparent"
  })}")`;
</script>

Result:

This demonstrates the article’s idea: one-dimensional patterns can be blended into stripe-based designs.

7. Validating Supported Characters

Code:

<svg id="barcode-valid"></svg>

<script>
JsBarcode("#barcode-valid", "WEB-123", {
  valid: function(valid) {
    document.getElementById("valid-message").textContent =
      valid ? "Valid barcode text" : "Use basic Latin characters only";
  }
});
</script>

Result:

Try text

Valid barcode text

8. QR Code Generation Pattern

Code:

<div id="qrcode"></div>

<script>
new QRCode(document.getElementById("qrcode"), "https://www.zhangxinxu.com");
</script>

Result:

QR text

This page includes a tiny offline QR-style matrix renderer for demonstration, keeping the document self-contained.