How to generate barcodes in JavaScript & jQuery using Cloud API (low level) - ByteScout

How to generate barcodes in JavaScript & jQuery using Cloud API (low level)

  • Home
  • /
  • Articles
  • /
  • How to generate barcodes in JavaScript & jQuery using Cloud API (low level)

The source code sample below demonstrates how to generate barcodes in JavaScript & jQuery using Cloud API (low level).

Also, you can easily read barcodes in JavaScript & jQuery using ByteScout Cloud Api.


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>Barcode JQuery sample</title>
    <script src=""></script>
    <script src="generate_barcode.js" type="text/javascript" encoding="UTF-8"></script>

            <label>Copy-paste your API Key for here</label>
            <input type="text" id="apiKey" placeholder="API Key" />
            <input type="text" id="inputValue" placeholder="Input Value" />
            <label>Barcode type</label>
            <select id="barcodeType">
                <option value="Aztec"> Aztec  </option>
                <option value="Bookland"> Bookland  </option>
                <option value="Codabar"> Codabar  </option>
                <option value="Code128"> Code 128  </option>
                <option value="Code39" selected="selected"> Code 39  </option>
                <option value="Code93"> Code 93  </option>
                <option value="DataMatrix"> DataMatrix  </option>
                <option value="DeutschePostIdentcode"> Deutsche Post Identcode  </option>
                <option value="DeutschePostLeitcode"> Deutsche Post Leitcode  </option>
                <option value="DutchKix"> Dutch KIX  </option>
                <option value="EAN128"> EAN-128  </option>
                <option value="EAN13"> EAN-13  </option>
                <option value="EAN14"> EAN-14  </option>
                <option value="EAN2"> EAN-2  </option>
                <option value="EAN5"> EAN-5  </option>
                <option value="EAN8"> EAN-8  </option>
                <option value="GS1_128"> GS1-128  </option>
                <option value="GS1_DataBar_Expanded"> GS1 DataBar Expanded  </option>
                <option value="GS1_DataBar_Expanded_Stacked"> GS1 DataBar Expanded Stacked  </option>
                <option value="GS1_DataBar_Limited"> GS1 DataBar Limited  </option>
                <option value="GS1_DataBar_Omnidirectional"> GS1 DataBar Omnidirectional  </option>
                <option value="GS1_DataBar_Stacked"> GS1 DataBar Stacked  </option>
                <option value="GS1_DataBar_Stacked_Omnidirectional"> GS1 DataBar Stacked Omnidirectional  </option>
                <option value="GS1_DataBar_Truncated"> GS1 DataBar Truncated  </option>
                <option value="GS1_DataMatrix"> GS1-DataMatrix  </option>
                <option value="GTIN12"> GTIN-12  </option>
                <option value="GTIN13"> GTIN-13  </option>
                <option value="GTIN14"> GTIN-14  </option>
                <option value="GTIN8"> GTIN-8  </option>
                <option value="I2of5"> Interleaved 2 of 5  </option>
                <option value="IntelligentMail"> Intelligent Mail  </option>
                <option value="ISBN"> ISBN  </option>
                <option value="ITF14"> ITF-14  </option>
                <option value="JAN13"> JAN-13  </option>
                <option value="MacroPDF417"> Macro PDF417  </option>
                <option value="MaxiCode"> MaxiCode  </option>
                <option value="MicroPDF417"> Micro PDF417  </option>
                <option value="MSI"> MSI  </option>
                <option value="Numly"> Numly  </option>
                <option value="OpticalProduct"> Optical Product  </option>
                <option value="PDF417"> PDF417  </option>
                <option value="PDF417Truncated"> PDF417 Truncated  </option>
                <option value="Planet"> Planet  </option>
                <option value="Plessey"> Plessey  </option>
                <option value="Postnet"> Postnet  </option>
                <option value="PZN"> PZN  </option>
                <option value="QRCode"> QR Code  </option>
                <option value="RoyalMail"> Royal Mail  </option>
                <option value="SingaporePostalCode"> Singapore Postal Code  </option>
                <option value="SwissPostParcel"> Swiss Post Parcel  </option>
                <option value="Telepen"> Telepen  </option>
                <option value="UPCA"> UPC-A  </option>
                <option value="UPCE"> UPC-E  </option>
                <option value="USPSSackLabel"> USPS Sack Label  </option>
                <option value="USPSTrayLabel"> USPS Tray Label  </option>
        <button type="button" id="submit">Generate</button>

    <div id="errorBlock">
        <h4>Code: <span id="statusCode"></span></h4>
        <ul id="errors"></ul>

    <div id="resultBlock">
        <img src="" id="image">



$(document).ready(function () {

$(document).on("click", "#submit", function () {
    var apiKey = $("#apiKey").val().trim(); //Get your API key by registering at

    var url = "" + apiKey;
    var value = $("#inputValue").val();

    var options = {
        "properties": {
            "symbology": $("#barcodeType").val(),
            "foreColor": "Red",
            "margins": {
                "top": 0,
                "bottom": 0,
                "left": 0,
                "right": 0
            "resolutionX": 50,
            "resolutionY": 50,
            "size": {
                "height": 100,
                "width": 100
        "input": value,
        "inputType": "value",
        "outputType": "link"

        url: url,
        type: "POST",
        data: JSON.stringify(options),
        contentType: "application/json",
        success: function (link) {
            $("#image").attr("src", link);
        error: function (response) {
            $.each(response.responseJSON.Errors, function () {