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 a document imaging library 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
