JavaScript classes for barcode generation

In This Topic

Vintasoft.Barcode.js file contains classes, which allow to generate barcode image:

WebBarcodeWriterJS class - JavaScript class that allows to generate barcode image.
Web1DBarcodeWriterSettingsJS - JavaScript class that stores parameters of 1D barcode image.
Web2DBarcodeWriterSettingsJS - JavaScript class that stores parameters of 2D barcode image.
Web1DBarcodeTypeEnumJS - JavaScript class that represents enumeration that defines supported 1D barcode symbologies.
Web2DBarcodeTypeEnumJS - JavaScript class that represents enumeration that defines supported 2D barcode symbologies.
Information about other enumerations can be found in API reference.

Vintasoft.Barcode.d.ts file is TypeScript module for Vintasoft.Barcode.js file and it contains definitions of classes and enumerations for barcode generation in TypeScript.

Important: Vintasoft.Barcode.js file has reference to Vintasoft.Shared.js file.
Important: Vintasoft.Barcode.d.ts file must be used together with Vintasoft.Barcode.js, Vintasoft.Shared.js and Vintasoft.Shared.d.ts files.

For generating image of 1D barcode it is necessary to:

Create an instance of WebServiceJS class that will be used for communication with web barcode service.
Create an instance of WebBarcodeWriterJS class and specify that barcode writer must use web service created on previous step.
Create an instance of Web1DBarcodeWriterSettingsJS class and specify parameters of 1D barcode image.
Set instance of Web1DBarcodeWriterSettingsJS class as settings of barcode writer (WebBarcodeWriterJS.get_Settings and WebBarcodeWriterJS.set_Settings functions)
Send an asynchronous request to the web service and get the generated barcode image, as Base64 string, from the web sevice (WebBarcodeWriterJS.getBarcodeAsBase64Image function)

For generating image of 2D barcode it is necessary to:

Create an instance of WebServiceJS class that will be used for communication with web barcode service.
Create an instance of WebBarcodeWriterJS class and specify that barcode writer must use web service created on previous step.
Create an instance of Web2DBarcodeWriterSettingsJS class and specify parameters of 2D barcode image.
Set instance of Web2DBarcodeWriterSettingsJS class as settings of barcode writer (WebBarcodeWriterJS.get_Settings and WebBarcodeWriterJS.set_Settings functions)
Send an asynchronous request to the web service and get the generated barcode image, as Base64 string, from the web sevice (WebBarcodeWriterJS.getBarcodeAsBase64Image function)

Example: Here is JavaScript code that demonstrates how to generate an image of QR Code barcode:

JavaScript

<script type="text/javascript">
    /**
     * Generates 1D barcode image.
     */
    function generate1dBarcodeImage(barcodeType, barcodeValue) {
        // create service that allows to generate barcode
        var barcodeService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftBarcodeApi");

        // create the barcode writer
        var barcodeWriter = new Vintasoft.Barcode.WebBarcodeWriterJS(barcodeService);

        // create the barcode writer settings for generating 1D barcode
        var barcodeWriterSettings = new Vintasoft.Barcode.Web1DBarcodeWriterSettingsJS();
        // specify that barcode writer must generate QR barcode image
        barcodeWriterSettings.set_BarcodeType(new Vintasoft.Barcode.Web1DBarcodeTypeEnumJS(barcodeType));
        // specify the Code128 barcode value
        barcodeWriterSettings.set_Value(barcodeValue);

        // specify settings for barcode writer
        barcodeWriter.set_Settings(barcodeWriterSettings);

        // send an asynchronous request for getting barcode image as Base64 string
        barcodeWriter.getBarcodeAsBase64Image(__writeBarcode_success, __writeBarcode_failed);
    }

    /**
     * Generates 2D barcode image.
     */
    function generate2dBarcodeImage(barcodeType, barcodeValue) {
        // create web service that allows to generate barcode
        var barcodeService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftBarcodeApi");

        // create the barcode writer
        var barcodeWriter = new Vintasoft.Barcode.WebBarcodeWriterJS(barcodeService);

        // create the barcode writer settings for generating 2D barcode
        var barcodeWriterSettings = new Vintasoft.Barcode.Web2DBarcodeWriterSettingsJS();
        // specify that barcode writer must generate QR barcode image
        barcodeWriterSettings.set_BarcodeType(new Vintasoft.Barcode.Web2DBarcodeTypeEnumJS(barcodeType));
        // specify the QR barcode value
        barcodeWriterSettings.set_Value(barcodeValue);

        // specify settings for barcode writer
        barcodeWriter.set_Settings(barcodeWriterSettings);

        // send an asynchronous request for getting barcode image as Base64 string
        barcodeWriter.getBarcodeAsBase64Image(__writeBarcode_success, __writeBarcode_failed);
    }

    /**
     * Barcode is generated successfully.
     */
    function __writeBarcode_success(data) {
        if (data.success) {
            var barcodeImage = data.barcodeImage;
            document.getElementById("barcodeImage").src = barcodeImage;
        }
        else {
            alert(data.errorMessage);
        }
    }

    /**
     * Barcode generation is failed.
     */
    function __writeBarcode_failed(data) {
        // show information about error
        alert(data.errorMessage);
    }


    // set the session identifier
    Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
    // generate image of QR barcode with value "12345"
    generate2dBarcodeImage("QR", "12345");
</script>

Example: Here is TypeScript code of Angular component that demonstrates how to generate an image of QR Code barcode:

TYPESCRIPT

import { Component } from '@angular/core';

@Component({
  selector: 'barcode-generator-demo',
  templateUrl: './barcode-generator-demo.component.html'
})
export class BarcodeGeneratorDemoComponent {

  ngOnInit() {
    // generate image of QR barcode with value "12345"
    this.generate2dBarcodeImage("QR", "12345");
  }

  /**
   * Generates 1D barcode image.
   * @param barcodeType Barcode type.
   * @param barcodeValue Barcode value.
  */
  public generate1dBarcodeImage(barcodeType: string, barcodeValue: string) {
    // set the session identifier
    Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");

    // create web service that allows to generate barcode
    let barcodeService: Vintasoft.Shared.WebServiceJS = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftBarcodeApi");

    // create the barcode writer
    let barcodeWriter: Vintasoft.Barcode.WebBarcodeWriterJS = new Vintasoft.Barcode.WebBarcodeWriterJS(barcodeService);

    // create the barcode writer settings for generating 2D barcode
    let barcodeWriterSettings: Vintasoft.Barcode.Web1DBarcodeWriterSettingsJS = new Vintasoft.Barcode.Web1DBarcodeWriterSettingsJS();
    // specify that barcode writer must generate QR barcode image
    barcodeWriterSettings.set_BarcodeType(new Vintasoft.Barcode.WebBarcodeTypeEnumJS(barcodeType));
    // specify the QR barcode value
    barcodeWriterSettings.set_Value(barcodeValue);

    // specify settings for barcode writer
    barcodeWriter.set_Settings(barcodeWriterSettings);

    // send an asynchronous request for getting barcode image as Base64 string
    barcodeWriter.getBarcodeAsBase64Image(this.__writeBarcode_success, this.__writeBarcode_failed);
  }

  /**
   * Generates 2D barcode image.
   * @param barcodeType Barcode type.
   * @param barcodeValue Barcode value.
  */
  public generate2dBarcodeImage(barcodeType: string, barcodeValue: string) {
    // set the session identifier
    Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");

    // create web service that allows to generate barcode
    let barcodeService: Vintasoft.Shared.WebServiceJS = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftBarcodeApi");

    // create the barcode writer
    let barcodeWriter: Vintasoft.Barcode.WebBarcodeWriterJS = new Vintasoft.Barcode.WebBarcodeWriterJS(barcodeService);

    // create the barcode writer settings for generating 2D barcode
    let barcodeWriterSettings: Vintasoft.Barcode.Web2DBarcodeWriterSettingsJS = new Vintasoft.Barcode.Web2DBarcodeWriterSettingsJS();
    // specify that barcode writer must generate QR barcode image
    barcodeWriterSettings.set_BarcodeType(new Vintasoft.Barcode.WebBarcodeTypeEnumJS(barcodeType));
    // specify the QR barcode value
    barcodeWriterSettings.set_Value(barcodeValue);

    // specify settings for barcode writer
    barcodeWriter.set_Settings(barcodeWriterSettings);

    // send an asynchronous request for getting barcode image as Base64 string
    barcodeWriter.getBarcodeAsBase64Image(this.__writeBarcode_success, this.__writeBarcode_failed);
  }

  /**
   * Barcode is generated successfully.
   * @param data Object that stores response from barcode service.
   */
  private __writeBarcode_success(data: Vintasoft.Barcode.WebBarcodeWriteResponseParamsJS) {
    if (data.success) {
      let barcodeImage: string = data.barcodeImage;
      let barcodeImageElement: HTMLImageElement = document.getElementById("barcodeImage") as HTMLImageElement;
      barcodeImageElement.src = barcodeImage;
    }
    else {
      alert(data.errorMessage);
    }
  }

  /**
   * Barcode generation is failed.
   * @param data Object with information about error.
   */
  private __writeBarcode_failed(data) {
    // show information about error
    alert(data.errorMessage);
  }

}

Send Feedback