Web Demos

BARCODE READER SDK DEMO

Explore the flexibe barcode reading settings to optimize for your specific usage scenario.

WEB TWAIN SDK DEMO

Try the most popular web scanner features: scan images, import local images and PDF files, edit, save to local, upload to database, and etc.

BARCODE READER JAVASCRIPT DEMO

Transform any camera-equipped devices into real-time, browser-based barcode and QR code scanners.

MRZ SCANNER WEB DEMO

Detects the machine-readable zone of a passport, scans the text, and parses into human-readable data.

APP STORE DEMOS

BARCODE READER SDK FOR IOS

BARCODE READER SDK FOR ANDROID

VIEW MORE DEMOS >
Dev Center
Table of contents

Thanks for downloading Dynamsoft Barcode Reader Package!

Your download will start shortly. If your download does not begin, click here to retry.

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/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/dist/dbr.js"></script>
  • In the page “body”, add an input for image selecting and a div for displaying the barcode results.
<input id="ipt-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('ipt-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
    • Version 9.x
      • Version 9.2.12
      • 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 +
    © 2003–2023 Dynamsoft. All rights reserved.
    Privacy Statement / Site Map / Home / Purchase / Support