Reading Barcodes from an Image in a Web App

• Download Source Code - 5.1 MB
• ImageCapture Suite 30-Day Free Trial Download
• ImageCapture Suite Barcode Reader Online Demo

Introduction

Because of its accuracy and its ease of use, Barcodes have become more and more popular as a part of daily document management workflow. You can use barcodes to identify documents, separate batch scanning, or even get reliable metadata as a document identifier.

This article will show you how to decode barcodes from an image captured or scanned in a web application with the help of ImageCapture Suite.

Background

Dynamsoft’s Image Capture Suite is an online image acquisition and processing toolkit designed for web applications. It allows you to capture images from scanners, webcams and other TWAIN/UVC/WIA compatible devices from all mainstream browsers - Internet Explorer (32-bit/64-bit), Firefox, Chrome and Safari - on Windows and Mac. The toolkit also comes with a Barcode Reader SDK which allows you to decode both 1D and 2D barcode symbols online.

If you are interested in the SDK, the 30-day Free Trial can be downloaded from Dynamsoft website.

Coding Instruction

Special Note

As a component running in the client-side browsers, JavaScript is the preferred language to call all the methods/properties/events of ImageCapture Suite 

Capture/load the barcode image

ImageCapture Suite allows you to load an existing image or to capture images from scanners, webcams, etc.

/*-----------------Load an existing image from local disk---------------------*/
function btnLoad_onclick() {
    DWObject.IfShowFileDialog = true; //show File dialog box for you to browse and load an image(s) from local disk
    DWObject.LoadImageEx("", 5); //load the selected image into the control
}

/*-----------------Download an existing image from server---------------------*/

if(location.hostname != "")
    {
        DWObject.HTTPPort = location.port == "" ? 80 : location.port;
        DWObject.HTTPDownload(location.hostname, location.pathname.substring(0, location.pathname.lastIndexOf('/')) + ImgArr);  
    }

/*-----------------Capture a new image from scanner or webcam---------------------*/

function AcquireImageInner(){
    if (DW_DWTSourceContainerID == "")
        DWObject.SelectSource();
    else
        DWObject.SelectSourceByIndex(document.getElementById(DW_DWTSourceContainerID).selectedIndex);
    DWObject.CloseSource();
    DWObject.OpenSource();
    var iSelectedIndex = document.getElementById(DW_DWTSourceContainerID).selectedIndex;
    var iTwainType = DWObject.GetSourceType(iSelectedIndex);
    
    if(iTwainType == 0) // capture from TWAIN device
    {
        DWObject.IfShowUI = document.getElementById("ShowUI").checked; //set whether to show the user interface of the device

        var i;
        for(i=0;i<3;i++)
        {
            if(document.getElementsByName("PixelType").item(i).checked==true)
            DWObject.PixelType = i; //set the pixel type of the image
        }  
        DWObject.Resolution = Resolution.value; //set the resolution
        DWObject.IfFeederEnabled = document.getElementById("ADF").checked ; //scan from ADF or flatbed
        DWObject.IfDuplexEnabled = document.getElementById("Duplex").checked ; //if duplex scan
        AppendMessage("Pixel Type: " + DWObject.PixelType + "<br />Resolution: " + DWObject.Resolution + "<br />");
    }
    Else // capture from webcam
    {
        DWObject.IfShowUI = document.getElementById("ShowUIForWebcam").checked;
        
	if (DW_InWindows) {
        DWObject.SelectMediaTypeByIndex(document.getElementById("MediaType").selectedIndex);
        DWObject.SelectResolutionForCamByIndex(document.getElementById("ResolutionWebcam").selectedIndex);

        AppendMessage("MediaType: " + DWObject.MediaType + "<br />Resolution: " + DWObject.ResolutionForCam + "<br />");  
	}
    }
    DWObject.IfDisableSourceAfterAcquire = true;
    DWObject.AcquireImage(); //capture the image
}

Decode the barcode using JavaScript

After we load or capture a barcode image into the control, we can then work on decoding the barcode symbols.

function J_Barcoding() {
//check if the barcode reader SDK exists on the client machine, and if it's of the latest version, if not, download the latest barcode reader SDK from the web server
     var barcodeVerStr = DWObject.BarcodeVersion;
    if (!barcodeVerStr ||barcodeVerStr != DW_BarcodeVersion) {
        if (location.hostname != "") {
            var strHostIP = location.hostname;
            DWObject.HTTPPort = location.port == "" ? 80 : location.port;       
            var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII	
            var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
            var strBarcodepath = CurrentPath + "Resources/barcode.zip";
            DWObject.HTTPDownloadResource(strHostIP, strBarcodepath, "barcode.zip"); //download barcode reader DLL from web server to the client machine
        }
    }
  
    var strLength = DWObject.GetImageSize(DWObject.CurrentImageIndexInBuffer, DWObject.GetImageWidth(DWObject.CurrentImageIndexInBuffer), DWObject.GetImageHeight(DWObject.CurrentImageIndexInBuffer));
    if (strLength > 300000) //show progress bar if the image size is too big
        DWObject.IfShowProgressBar = true;
    else
        DWObject.IfShowProgressBar = false;
    var barcodeformat;
    barcodeformat = document.getElementById("ddl_barcodeFormat").value; //specify the barcode type
    DWObject.ReadBarcode(DWObject.CurrentImageIndexInBuffer, barcodeformat); // decode the barcode
    DWObject.IfShowProgressBar = true;
    var barcodeText = "";
    barcodeText += "ReadBarcode : " + DWObject.ErrorString + "<br/>"; 

    var count = DWObject.BarcodeCount;
    barcodeText += "BarcodeCount: " + count + "<br/>";
    for (i = 0; i < count; i++) {
        var text = DWObject.GetBarcodeText(i); 
        var x = DWObject.GetBarcodeInfo(0, i); 
        var y = DWObject.GetBarcodeInfo(1, i);
        var type = DWObject.GetBarcodeInfo(2, i);
        var len = DWObject.GetBarcodeInfo(5, i);
        barcodeText += ("barcode[" + (i + 1) + "]: " + text + "<br/>");
        barcodeText += ("text len:" + len + "<br/>");
        barcodeText += ("type:" + getBarcodeType(type) + "<br/>");
        barcodeText += ("x: " + x + " y:" + y + "<br/>");

        var strBarcodeString = text + "\r\n" + getBarcodeType(type);
        DWObject.AddText(DWObject.CurrentImageIndexInBuffer, x, y, strBarcodeString, 255, 4894463, 0, 1);
    }
    AppendMessage(barcodeText);    
    J_SetBtnProcessingAndText("btnReadBarcode", false, "Try Barcode");
}

Run or deploy the application on web server

The complete source code can be downloaded from the article.

There is a "Scripts\ProductKey.js" file with a temporary trial product key. If you get license error when running the sample, you can download ImageCapture Suite from Dynamsoft’s website to get a valid trial license. ImageCapture Suite 30-Day Free Trial Download

To test barcode reading from different client machines, you can simply copy the sample code with ImageCapture Suite to your web server (IIS, Apache or Tomcat). Users only need to download and install the ActiveX/Plugin in the browser on their first visit to the web page. More details on how to deploy ImageCaptureSuite

The online demo is also available for your reference.
ImageCapture Suite Barcode Reader Online Demo