Use the sample source code below to generate barcodes in JavaScirpt using Cloud API (low level).

You can also read barcodes in JavaScript using Cloud API.

Sample.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Barcode Generator Cloud API Example</title>
    <script src="generate_barcode.js" type="text/javascript" encoding="UTF-8"></script>
</head>

<body>

    <form name="form1">
        <p>
            <label>Copy-paste your API Key for Bytescout.IO here</label>
            <input type="text" id="apiKey" placeholder="API Key"/>
        </p>
        <p>
            <label>Barcode Value</label>
            <input type="text" id="inputValue" placeholder="Input Value"/>
        </p>
        <p>
            <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>
            </select>
        </p>

        <button type="button" id="submit" onclick="return generateBarcode()">Generate</button>
    </form>

    <div id="errorBlock" style="display: none">
        <h2>Error:</h2>
        <h4>Code: <span id="statusCode"></span></h4>
        <div id="errors"></div>
    </div>

    <div id="resultBlock" style="display: none">
        <h2>Result:</h2>
        <img src="" id="image">
    </div>

</body>
</html>

generate_barcode.js

function generateBarcode()
{
    // Hide result blocks
    document.getElementById("errorBlock").style.display = "none";
    document.getElementById("resultBlock").style.display = "none";

    // Get API Key
    var apiKey = document.getElementById("apiKey").value.trim();
    if (apiKey == null || apiKey == "") {
        alert("API Key should not be empty.");
        return false;
    }
    // Get barcode type
    var barcodeType=document.getElementById("barcodeType").value;
    // Get barcode value
    var inputValue = document.getElementById("inputValue").value.trim();
    if (inputValue == null || inputValue == "") {
        alert("Barcode Value should not be empty.");
        return false;
    }

    // Prepare URL
    var url = "https://bytescout.io/api/v1/barcode/generate";
    url += "?apiKey=" + apiKey; // Get your API key by registering at http://www.bytescout.io
    url += "&properties.symbology=" + barcodeType; // Set barcode type (symbology)
    url += "&input=" + inputValue; // Set barcode value
    url += "&outputType=link"; // Set output type Link

    // Prepare request
    var httpRequest = new XMLHttpRequest();
    httpRequest.open("GET", url, true);
    // Handle asynchronous response
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4) {
            // If OK
            if (httpRequest.status == 200) {
                var imageLink = httpRequest.responseText;
                document.getElementById("resultBlock").style.display = "block"; // show hidden resultBlock
                document.getElementById("image").setAttribute("src", imageLink); // Set image link to display
            }
            // Else display error
            else {
                document.getElementById("errorBlock").style.display = "block"; // show hidden errorBlock
                // Display error
                document.getElementById("statusCode").innerHTML = httpRequest.status + " - " + httpRequest.statusText;
                document.getElementById("errors").innerHTML = httpRequest.responseText;
            }
        }
    }
    // Send request
    httpRequest.send();

    return true;
}