Dev Center
Table of contents

JavaScript Hello World Sample - Read An Image

In most cases, users of Dynamsoft Barcode Reader JavaScript SDK (hereafter called “the library”) reads barcodes from a video input. In this article, we will discuss an uncommon usage of the library: reading barcodes from existing images.

Official Sample

Preparation

In this article, we’ll make use of the library through the jsDelivr CDN. Make sure you can access this file “https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js”.

Create the sample page

  • Create an empty web page and name it “read-an-image.html” with the following code:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Dynamsoft Barcode Reader Sample - Read an Image</title>
</head>

<body>
    <script></script>
</body>

</html>
  • Add reference to the library in the page “head”.
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.42/dist/dbr.js"></script>
  • In the page “body”, add an input for image selecting and a div for displaying the barcode results.
<input id="input-file" type="file" accept="image/png,image/jpeg,image/bmp,image/gif">
<div id="results"></div>
  • Add an event listner for the file input, then add barcode reading code in the callback.
let pReader = null;
Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
document.getElementById('input-file').addEventListener('change', async function() {
    try {
        let resDIV = document.getElementById('results');
        let reader = await (pReader = pReader || Dynamsoft.DBR.BarcodeReader.createInstance());
        for (let i = 0; i < this.files.length; ++i) {
            // Actually there will only be one file here (no 'multiple' attribute)
            let file = this.files[i];
            // Decode the file
            let results = await reader.decode(file);
            if (results.length === 0) {
                resDIV.innerHTML = "No Barcode Found!";
                return;
            }
            var info = "";
            for (let result of results) {
                const format = result.barcodeFormat ? result.barcodeFormatString : result.barcodeFormatString_2;
                info += "<p>" + format + ": " + result.barcodeText + "</p>";
            }
            resDIV.innerHTML = info;
        }
    } catch (ex) {
        alert(ex.message);
    }
});

NOTE

  • An instance of the library is created when an image is selected for the first time.
  • The method decode() takes the file as the input, reads it and returns the results.

In your application, the input may not be a file, the method decode() can handle the following types of input: Blob, Buffer, ArrayBuffer, Uint8Array, Uint8ClampedArray, HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, string.

This page is compatible for:

Version 7.5.0

Is this page helpful?

YesYes NoNo

In this article:

latest version

    • Latest version(10.2.10)
    • Version 10.x
      • Version 10.0.21
      • Version 10.0.20
    • Version 9.x
      • Version 9.6.42
      • Version 9.6.40
      • Version 9.6.33
      • Version 9.6.32
      • Version 9.6.31
      • Version 9.6.30
      • Version 9.6.21
      • Version 9.6.20
      • Version 9.6.11
      • Version 9.6.10
      • Version 9.6.2
      • Version 9.6.1
      • Version 9.6.0
      • Version 9.3.1
      • Version 9.3.0
      • Version 9.2.13
      • Version 9.2.12
      • Version 9.2.11
      • Version 9.0.2
      • Version 9.0.1
      • Version 9.0.0
    • Version 8.x
      • Version 8.8.7
      • Version 8.8.5
      • Version 8.8.3
      • Version 8.8.0
      • Version 8.6.3
      • Version 8.6.0
      • Version 8.4.0
      • Version 8.2.5
      • Version 8.2.3
      • Version 8.2.1
      • Version 8.2.0
      • Version 8.1.3
      • Version 8.1.2
      • Version 8.1.0
      • Version 8.0.0
    • Version 7.x
      • Version 7.6.0
      • Version 7.5.0
    Change +