Create a Web App to Read Multiple Barcodes Using Dynamsoft

What is Multiple Barcode Scanning?

Multiple barcode scanning is the process of scanning and decoding multiple barcodes in a single image or frame.

Users can capture multiple barcodes in a single shot, which can be helpful in situations where there are several products or items that need to be scanned quickly. For example, in a retail store, a cashier can scan multiple barcodes on a single carton of products instead of scanning each product one by one.

Here is a high-level overview of how to create a web app to read multiple barcodes using Dynamsoft. By following the steps explained below, you should be able to create a functional app that can scan multiple barcodes from a single image.

Create a new vanilla TypeScript project using Vite.

npm create vite@latest example -- --template vanilla-ts

Install Dynamsoft Barcode Reader as a dependency.

npm install dynamsoft-javascript-barcode

In the index.html, add an input element for selecting a file, a button to read barcodes and an SVG element to show the results.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
  </head>
  <body>
    <div id="app">
      <div class="barcode-reader">
        <div>
          Load local image:
          <input type="file" id="barcodeFile" accept=".jpg,.jpeg,.png,.bmp" />
        </div>
        <div>
          <button id="decodeButton">Decode</button>
        </div>
        <div id="status"></div>
        <svg id="resultSVG" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Load the selected image file and display it in the SVG element.

let img;
window.onload = function(){
  let barcodeFile = document.getElementById('barcodeFile') as HTMLInputElement;
  barcodeFile.addEventListener("change",function(){
    loadImageFromFile();
  })
}

function loadImageFromFile() { 
  console.log("loadImageFromFile");
  let barcodeFile = document.getElementById('barcodeFile') as HTMLInputElement;
  let files = barcodeFile.files as FileList;
  if (files.length == 0) {
    return;
  }
  let file = files[0];
  let fileReader = new FileReader();
  fileReader.onload = function(e:any){
    loadImage(e.target.result);
  };
  fileReader.onerror = function () {
    console.warn('oops, something went wrong.');
  };
  fileReader.readAsDataURL(file);
}

function loadImage(imgsrc:string){
  if (imgsrc) {
    img = new Image();
    img.src = imgsrc;
    img.onload = function(){
      let svgElement = document.getElementById("resultSVG") as HTMLElement;
      svgElement.innerHTML = "";
      let svgImage = document.createElementNS("http://www.w3.org/2000/svg", "image");
      svgImage.setAttribute("href",imgsrc);
      svgElement.setAttribute("viewBox","0 0 "+img.width+" "+img.height);
      svgElement.appendChild(svgImage);
    }
  }
}

Read barcodes from the selected image and overlay the results in the SVG element when the decode button is clicked. Initialize Dynamsoft Barcode Reader if it has not been initialized. You may need to apply for a license to use it.

let reader:BarcodeReader;
let results:TextResult[];
window.onload = function(){
  let decodeButton = document.getElementById('decodeButton') as HTMLButtonElement;
  decodeButton.addEventListener("click",function(){
    decodeImg();
  })
}

async function decodeImg(){
  if (!img) {
    return;
  }
  let status = document.getElementById("status") as HTMLElement;
  if (!reader) {
    await initDBR();
  }
  status.innerText = "decoding...";
  results = await reader.decode(img);
  console.log(results);
  overlayResults(results);
  status.innerText = "";
}

async function initDBR(){
  let status = document.getElementById("status") as HTMLElement;
  status.innerText = "initializing...";
  BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.10/dist/";
  BarcodeReader.license = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="; //one-day public trial
  reader = await BarcodeReader.createInstance();
  status.innerText = "";
}

Overall, creating a web app to read multiple barcodes requires knowledge of HTML, CSS, JavaScript, and the Dynamsoft barcode scanning API.

Blog

Create a Web App to Read Multiple Barcodes Using Dynamsoft

Eric Parker 🥂

What is Multiple Barcode Scanning?

Join Our Newsletter. No Spam, Only the good stuff.

Related