Barcode

Introduction

The Barcode shape allows the programmer to add a barcode into the label. This document describes the operation flow of this object.

Object overview

The barcode is basically a number, encoded using a specific format, that gets rendered into an svg representation using the packagage https://www.npmjs.com/package/jsbarcode . The Barcode object should be able to:

• Render a specific barcode from his numeric representation

• Render a text at the bottom, with the content

• Render a placeholder when no code is specified (allow the user to not specify it)

• Expose utils for setting the number, changing the encoding and check if there is a value

• Be edited as all fabric objects (borders, text options, etc…)

Code examples

In the following example, we can get a url of the image representing the barcode. Barcode will load the image into an Image object and display it.

function textToBase64Barcode(text){
      var canvas = document.createElement("canvas");
      JsBarcode(canvas, text, {format: "CODE39"});
      return canvas.toDataURL("image/png");
    }

Adding object to layer

The following snippet can add a Barcode to a layer.

layer.add(new Barcode({
      placeHolder: 'Barcode',
      code: 'myfjfkls',
      encoding: 'CODE96',
      width: 300,
      height: 50,
      codeLineWidth: 2,
    }));

Barcode properties

{
  textAlign: Alignment.Center,
  bold: false,
  fontName: 'arial',
  italic: false,
  textColor: 'black',
  fontSize: 10,
  padding: 0,
}

{
  textAlign: Alignment.Center,
  bold: false,
  fontName: 'arial',
  italic: false,
  textColor: 'black',
  fontSize: 10,
  padding: 0,
}