JavaScript classes for barcode recognition

In This Topic

Vintasoft.Barcode.js file contains classes, which allow to recognize barcodes from image or image-resource of PDF document:

WebBarcodeReaderJS class - JavaScript class that allows to recognize barcodes from image or image-resource of PDF document.
WebBarcodeReaderSettingsJS - JavaScript class that stores settings of barcode reader.
WebMailmarkCmdmValueJS - JavaScript class that contains information about value of recognized Mailmark CMDM 2D barcode.
WebPpnBarcodeValueJS - JavaScript class that contains information about value of recognized PPN barcode.
WebSwissQrCodeBarcodeValueJS - JavaScript class that contains information about value of recognized Swiss QR Code barcode.
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 barcode recognition it is necessary to:

Create an instance of WebServiceJS class that will be used for communication with web barcode service.
Create an instance of WebBarcodeReaderJS class and specify that barcode reader must use web service created on previous step.
Set settings of barcode reader.
Send an asynchronous request to the web service and get the barcode recognition result from web sevice (WebBarcodeWriterJS.getBarcodeAsBase64Image function)

Example: Here is JavaScript code that demonstrates how to recognize Code39 barcodes from image:

JavaScript

<script type="text/javascript">

    /**
     * Barcodes are recognized successfully.
     */
    function __readBarcodes_success(data) {
        if (data.success) {
            // get the barcode recognition result
            var barcodeRecognitionResults = data.results;

            var htmlMarkup = '';
            // if no barcodes found
            if (barcodeRecognitionResults.length == 0) {
                htmlMarkup = 'No barcodes found.';
            }
            // if barcodes are found
            else {
                htmlMarkup = barcodeRecognitionResults.length.toString() + ' barcodes are found.<br />';
                htmlMarkup += '<br />';

                // for each recognized barcode
                for (var i = 0; i < barcodeRecognitionResults.length; i++) {
                    // get the barcode recognition result
                    var barcodeRecognitionResult = barcodeRecognitionResults[i];

                    // output information about recognized barcode
                    htmlMarkup += '[' + (i + 1) + ':' + barcodeRecognitionResult.barcodeType + ']<br />';
                    htmlMarkup += '  Value: ' + barcodeRecognitionResult.value + '<br />';
                    htmlMarkup += '  Confidence: ' + barcodeRecognitionResult.confidence + '<br />';
                    htmlMarkup += '  Reading quality: ' + barcodeRecognitionResult.readingQuality.toFixed(2) + '<br />';
                    htmlMarkup += '  Threshold: ' + barcodeRecognitionResult.threshold + '<br />';
                    htmlMarkup += '  Region: ' +
                        'LT=(' + barcodeRecognitionResult.region.leftTop.x + ',' + barcodeRecognitionResult.region.leftTop.y + '); ' +
                        'RT=(' + barcodeRecognitionResult.region.rightTop.x + ',' + barcodeRecognitionResult.region.rightTop.y + '); ' +
                        'LB=(' + barcodeRecognitionResult.region.leftBottom.x + ',' + barcodeRecognitionResult.region.leftBottom.y + '); ' +
                        'RB=(' + barcodeRecognitionResult.region.rightBottom.x + ',' + barcodeRecognitionResult.region.rightBottom.y + '); ' +
                        'Angle=' + barcodeRecognitionResult.region.angle.toFixed(1) + '°<br />';

                    htmlMarkup += '<br />';
                }
            }

            var barcodeInformationElement = document.getElementById("barcodeInformation");
            barcodeInformationElement.innerHTML = htmlMarkup;
        }
    }

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


    // set the session identifier
    Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");

    // create service that allows to recognize barcodes
    var barcodeService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftBarcodeApi");

    // create the barcode reader
    var barcodeReader = new Vintasoft.Barcode.WebBarcodeReaderJS(barcodeService);
    // specify that Code39 barcode must be searched
    barcodeReader.get_Settings().set_BarcodeType(new Vintasoft.Barcode.WebBarcodeTypeEnumJS("Code39"));

    // create web image that references to a file "AllSupportedBarcodes.png" in directory "/UploadedImageFiles/SessionID/"
    var imageSource = new Vintasoft.Shared.WebImageSourceJS("AllSupportedBarcodes.png");
    var image = new Vintasoft.Shared.WebImageJS(imageSource, 0);

    // send an asynchronous request for barcode recognition
    barcodeReader.readBarcodes(image, this.__readBarcodes_success, this.__readBarcodes_fail);
</script>

Example: Here is JavaScript code that demonstrates how to recognize Code39, Code128, EAN13 and UPCA barcodes from image and obtain the results of print quality tests for all recognized barcodes:

JavaScript

<script type="text/javascript">

    /**
     * Barcodes are recognized successfully.
     */
    function __readBarcodes_success(data) {
        if (data.success) {
            // get the barcode recognition result
            var barcodeRecognitionResults = data.results;

            var htmlMarkup = '';
            // if no barcodes found
            if (barcodeRecognitionResults.length == 0) {
                htmlMarkup = 'No barcodes found.';
            }
            // if barcodes are found
            else {
                htmlMarkup = barcodeRecognitionResults.length.toString() + ' barcodes are found.<br />';
                htmlMarkup += '<br />';

                // for each recognized barcode
                for (var i = 0; i < barcodeRecognitionResults.length; i++) {
                    // get the barcode recognition result
                    var barcodeRecognitionResult = barcodeRecognitionResults[i];

                    // output information about recognized barcode
                    htmlMarkup += '[' + (i + 1) + ':' + barcodeRecognitionResult.barcodeType + ']<br />';
                    htmlMarkup += '  Value: ' + barcodeRecognitionResult.value + '<br />';
                    htmlMarkup += '  Confidence: ' + barcodeRecognitionResult.confidence + '<br />';
                    htmlMarkup += '  Reading quality: ' + barcodeRecognitionResult.readingQuality.toFixed(2) + '<br />';
                    htmlMarkup += '  Threshold: ' + barcodeRecognitionResult.threshold + '<br />';
                    htmlMarkup += '  Region: ' +
                        'LT=(' + barcodeRecognitionResult.region.leftTop.x + ',' + barcodeRecognitionResult.region.leftTop.y + '); ' +
                        'RT=(' + barcodeRecognitionResult.region.rightTop.x + ',' + barcodeRecognitionResult.region.rightTop.y + '); ' +
                        'LB=(' + barcodeRecognitionResult.region.leftBottom.x + ',' + barcodeRecognitionResult.region.leftBottom.y + '); ' +
                        'RB=(' + barcodeRecognitionResult.region.rightBottom.x + ',' + barcodeRecognitionResult.region.rightBottom.y + '); ' +
                        'Angle=' + barcodeRecognitionResult.region.angle.toFixed(1) + '°<br />';

                    // if barcode print quality test exists
                    if (barcodeRecognitionResult.printQualityTest != undefined) {
                      // output information about print quality test result
                      htmlMarkup += 'Barcode print quality test is available.<br />';
                    }

                    htmlMarkup += '<br />';
                }
            }

            var barcodeInformationElement = document.getElementById("barcodeInformation");
            barcodeInformationElement.innerHTML = htmlMarkup;
        }
    }

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


    // set the session identifier
    Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");

    // create service that allows to recognize barcodes
    var barcodeService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftBarcodeApi");

    // create the barcode reader
    var barcodeReader = new Vintasoft.Barcode.WebBarcodeReaderJS(barcodeService);
    // specify that Code39, Code128, EAN13 and UPCA barcode must be searched
    var barcodeTypesToSearch = new Vintasoft.Barcode.WebBarcodeTypeEnumJS("Code39");
    barcodeTypesToSearch = barcodeTypesToSearch.add("Code128");
    barcodeTypesToSearch = barcodeTypesToSearch.add("EAN13");
    barcodeTypesToSearch = barcodeTypesToSearch.add("UPCA");
    barcodeReader.get_Settings().set_BarcodeType(barcodeTypesToSearch);
    // specify that the print quality test information must be collected for all recognized barcodes
    barcodeReader.get_Settings().set_CollectTestInformation(true);

    // create web image that references to a file "AllSupportedBarcodes.png" in directory "/UploadedImageFiles/SessionID/"
    var imageSource = new Vintasoft.Shared.WebImageSourceJS("AllSupportedBarcodes.png");
    var image = new Vintasoft.Shared.WebImageJS(imageSource, 0);

    // send an asynchronous request for barcode recognition
    barcodeReader.readBarcodes(image, this.__readBarcodes_success, this.__readBarcodes_fail);
</script>

Example: Here is TypeScript code of Angular component that demonstrates how to recognize Code39 barcodes in image:

TYPESCRIPT

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

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

  ngOnInit() {
    // set the session identifier
    Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");

    // create service that allows to recognize barcodes
    let barcodeService: Vintasoft.Shared.WebServiceControllerJS = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftBarcodeApi");

    // create the barcode reader
    let barcodeReader: Vintasoft.Barcode.WebBarcodeReaderJS = new Vintasoft.Barcode.WebBarcodeReaderJS(barcodeService);
    // specify that Code39 barcode must be searched
    barcodeReader.get_Settings().set_BarcodeType(new Vintasoft.Barcode.WebBarcodeTypeEnumJS("Code39"));

    // create web image, where barcodes must be recognized
    let imageSource: Vintasoft.Shared.WebImageSourceJS = new Vintasoft.Shared.WebImageSourceJS("AllSupportedBarcodes.png");
    let image: Vintasoft.Shared.WebImageJS = new Vintasoft.Shared.WebImageJS(imageSource, 0);

    // send an asynchronous request for barcode recognition
    barcodeReader.readBarcodes(image, this.__readBarcodes_success, this.__readBarcodes_fail);
  }

  /**
   * Barcodes are recognized successfully.
   * @param {object} data Object with information about recognized barcodes.
   */
  private __readBarcodes_success(data: Vintasoft.Barcode.WebBarcodeReadResponseParamsJS) {
    if (data.success) {
      // get the barcode recognition result
      let barcodeRecognitionResults: Vintasoft.Barcode.WebBarcodeRecognitionResultJS[] = data.results;

      let htmlMarkup: string = '';
      // if no barcodes found
      if (barcodeRecognitionResults.length == 0) {
        htmlMarkup = 'No barcodes found.';
      }
      // if barcodes are found
      else {
        htmlMarkup = barcodeRecognitionResults.length.toString() + ' barcodes are found.<br />';
        htmlMarkup += '<br />';

        // for each recognized barcode
        for (let i: number = 0; i < barcodeRecognitionResults.length; i++) {
          // get the barcode recognition result
          let barcodeRecognitionResult: Vintasoft.Barcode.WebBarcodeRecognitionResultJS = barcodeRecognitionResults[i];

          // output information about recognized barcode
          htmlMarkup += '[' + (i + 1) + ':' + barcodeRecognitionResult.barcodeType + ']<br />';
          htmlMarkup += '  Value: ' + barcodeRecognitionResult.value + '<br />';
          htmlMarkup += '  Confidence: ' + barcodeRecognitionResult.confidence + '<br />';
          htmlMarkup += '  Reading quality: ' + barcodeRecognitionResult.readingQuality.toFixed(2) + '<br />';
          htmlMarkup += '  Threshold: ' + barcodeRecognitionResult.threshold + '<br />';
          htmlMarkup += '  Region: ' +
            'LT=(' + barcodeRecognitionResult.region.leftTop.x + ',' + barcodeRecognitionResult.region.leftTop.y + '); ' +
            'RT=(' + barcodeRecognitionResult.region.rightTop.x + ',' + barcodeRecognitionResult.region.rightTop.y + '); ' +
            'LB=(' + barcodeRecognitionResult.region.leftBottom.x + ',' + barcodeRecognitionResult.region.leftBottom.y + '); ' +
            'RB=(' + barcodeRecognitionResult.region.rightBottom.x + ',' + barcodeRecognitionResult.region.rightBottom.y + '); ' +
            'Angle=' + barcodeRecognitionResult.region.angle.toFixed(1) + '°<br />';
          htmlMarkup += '<br />';
        }
      }

      let barcodeInformationElement: HTMLDivElement = document.getElementById("barcodeInformation") as HTMLDivElement;
      barcodeInformationElement.innerHTML = htmlMarkup;
    }
  }

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

Example: Here is TypeScript code of Angular component that demonstrates how to recognize Code39, Code128, EAN13 and UPCA barcodes in image and obtain the results of print quality tests for all recognized barcodes:

TYPESCRIPT

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

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

  ngOnInit() {
    // set the session identifier
    Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");

    // create service that allows to recognize barcodes
    let barcodeService: Vintasoft.Shared.WebServiceControllerJS = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftBarcodeApi");

    // create the barcode reader
    let barcodeReader: Vintasoft.Barcode.WebBarcodeReaderJS = new Vintasoft.Barcode.WebBarcodeReaderJS(barcodeService);
    // specify that Code39, Code128, EAN13 and UPCA barcode must be searched
    let barcodeTypesToSearch: Vintasoft.Barcode.WebBarcodeTypeEnumJS = new Vintasoft.Barcode.WebBarcodeTypeEnumJS("Code39");
    barcodeTypesToSearch = barcodeTypesToSearch.add("Code128");
    barcodeTypesToSearch = barcodeTypesToSearch.add("EAN13");
    barcodeTypesToSearch = barcodeTypesToSearch.add("UPCA");
    barcodeReader.get_Settings().set_BarcodeType(barcodeTypesToSearch);
    // specify that the print quality test information must be collected for all recognized barcodes
    barcodeReader.get_Settings().set_CollectTestInformation(true);

    // create web image, where barcodes must be recognized
    let imageSource: Vintasoft.Shared.WebImageSourceJS = new Vintasoft.Shared.WebImageSourceJS("AllSupportedBarcodes.png");
    let image: Vintasoft.Shared.WebImageJS = new Vintasoft.Shared.WebImageJS(imageSource, 0);

    // send an asynchronous request for barcode recognition
    barcodeReader.readBarcodes(image, this.__readBarcodes_success, this.__readBarcodes_fail);
  }

  /**
   * Barcodes are recognized successfully.
   * @param {object} data Object with information about recognized barcodes.
   */
  private __readBarcodes_success(data: Vintasoft.Barcode.WebBarcodeReadResponseParamsJS) {
    if (data.success) {
      // get the barcode recognition result
      let barcodeRecognitionResults: Vintasoft.Barcode.WebBarcodeRecognitionResultJS[] = data.results;

      let htmlMarkup: string = '';
      // if no barcodes found
      if (barcodeRecognitionResults.length == 0) {
        htmlMarkup = 'No barcodes found.';
      }
      // if barcodes are found
      else {
        htmlMarkup = barcodeRecognitionResults.length.toString() + ' barcodes are found.<br />';
        htmlMarkup += '<br />';

        // for each recognized barcode
        for (let i: number = 0; i < barcodeRecognitionResults.length; i++) {
          // get the barcode recognition result
          let barcodeRecognitionResult: Vintasoft.Barcode.WebBarcodeRecognitionResultJS = barcodeRecognitionResults[i];

          // output information about recognized barcode
          htmlMarkup += '[' + (i + 1) + ':' + barcodeRecognitionResult.barcodeType + ']<br />';
          htmlMarkup += '  Value: ' + barcodeRecognitionResult.value + '<br />';
          htmlMarkup += '  Confidence: ' + barcodeRecognitionResult.confidence + '<br />';
          htmlMarkup += '  Reading quality: ' + barcodeRecognitionResult.readingQuality.toFixed(2) + '<br />';
          htmlMarkup += '  Threshold: ' + barcodeRecognitionResult.threshold + '<br />';
          htmlMarkup += '  Region: ' +
            'LT=(' + barcodeRecognitionResult.region.leftTop.x + ',' + barcodeRecognitionResult.region.leftTop.y + '); ' +
            'RT=(' + barcodeRecognitionResult.region.rightTop.x + ',' + barcodeRecognitionResult.region.rightTop.y + '); ' +
            'LB=(' + barcodeRecognitionResult.region.leftBottom.x + ',' + barcodeRecognitionResult.region.leftBottom.y + '); ' +
            'RB=(' + barcodeRecognitionResult.region.rightBottom.x + ',' + barcodeRecognitionResult.region.rightBottom.y + '); ' +
            'Angle=' + barcodeRecognitionResult.region.angle.toFixed(1) + '°<br />';

          // if barcode print quality test exists
          if (barcodeRecognitionResult.printQualityTest != undefined) {
            // output information about print quality test result
            htmlMarkup += 'Barcode print quality test is available.<br />';
          }

          htmlMarkup += '<br />';
        }
      }

      let barcodeInformationElement: HTMLDivElement = document.getElementById("barcodeInformation") as HTMLDivElement;
      barcodeInformationElement.innerHTML = htmlMarkup;
    }
  }

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

Send Feedback