Barcodes are everywhere today. They are particularly popular with retail
stores, for warehouse inventory applications, and more. Essentially, barcodes
are important for applications where easily sharing information via computers
or mobile devices is important.
As the hunger for more online information sharing and saving grows so
too does the need to process barcode information from a web application. But
how can you integrate barcode reading technology with web technologies?
If you have tried integrating a barcode with a web application before,
you will know how time-consuming the task can be. However, with the help of
Dynamsoft's Dynamic Web TWAIN 10.2 Barcode Reader Add-on, you can make it
happen in just a few minutes.
In this tutorial, I will show you step by step how to build a simple
barcode reading web application.
For this tutorial, you need a basic understanding of HTML and
JavaScript. There is no CSS involved in this demo page. We'll concentrate on
the barcode functionality in this tutorial. You can add whatever styles you
like afterward. Even if you are a novice to web programming, you will find this
tutorial easy to follow. So just take it easy and have some fun.
Here is a summary of the steps:
1. Start a Web Application
2. Add Dynamic Web TWAIN to the HTML Page
3. Scan or Load Images
4. Read Barcodes
In step 1, 2, and 3, we are integrating Dynamic Web TWAIN with your web
application. This is a prerequisite for barcode processing as, in this case,
Barcode Reader is an add-on of Dynamic Web TWAIN.
Step 1: Start a Web Application
You can get Dynamic Web TWAIN Barcode Reader Resources files either from
Dynamsoft's Dynamic Web TWAIN 9.2 free 30-day trial or the barcode sample code
we used in this tutorial.
Create an empty HTML page named readbarcode.HTML. Put it on the same
folder as the Resources folder.
Step 2: Add Dynamic Web TWAIN to the HTML Page
Include dynamsoft.webtwain.initiate.js, dynamsoft.webtwain.config.js,
and dynamsoft.webtwain.addon.barcode.js in the HTML head.
dynamsoft.webtwain.initiate.js and dynamsoft.webtwain.config.js are responsible
for Dynamic Web TWAIN's initialization, while
dynamsoft.webtwain.addon.barcode.js provides all barcode related API
interfaces:
<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js">
</script>
<script type="text/javascript"
src="Resources/dynamsoft.webtwain.config.js"> </script>
<script type="text/javascript"
src="Resources/addon/dynamsoft.webtwain.addon.barcode.js">
</script>
Add a div container, and register the OnWebTwainReady event to get
access to Dynamic Web TWAIN via DWObject:
<div id="dwtcontrolContainer"></div>
<script type="text/javascript">
Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady',
Dynamsoft_OnReady); // Register OnWebTwainReady event. This event fires as soon
as Dynamic Web TWAIN is initialized and ready to be used
var DWObject;
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); //
Get the Dynamic Web TWAIN object that is embeded in the div with id
'dwtcontrolContainer'
}
Step 3: Scan or Load Images
Add Scan and Load buttons to the page:
<input type="button" value="Scan"
onclick="AcquireImage();" />
<input type="button" value="Load"
onclick="LoadImage();" /><br />
And add the implementation of function AcquireImage() and LoadImage().
Notice how LoadImage() handles success and failure with callback functions
OnSuccess() and OnFailure():
function AcquireImage() {
if (DWObject) {
DWObject.SelectSource();
DWObject.OpenSource();
DWObject.IfDisableSourceAfterAcquire = true; // Scanner source will be
disabled/closed automatically after the scan.
DWObject.AcquireImage();
}
}
//Callback functions for async APIs
function OnSuccess() {
console.log('successful');
}
function OnFailure(errorCode, errorString) {
alert(errorString);
}
function LoadImage() {
if (DWObject) {
DWObject.IfShowFileDialog = true; // Open the system's file dialog to
load image
DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess,
OnFailure); // Load images in all supported formats (.bmp,.jpg,.tif,.png,.pdf).
OnSuccess or OnFailure will be called after the operation
}
}
Step 4: Read Barcodes
Now you have two options to get the image loaded:
Scan images from a scanner (AcquireImage());
Or load hard disk images (LoadImage()).
It's time to add the Dynamic Web TWAIN Barcode Reader add-on to your web
page.
Add a selection list for supported barcode formats:
<select id="barcodeformat"></select>
And populate it in function Dynamsoft_OnReady():
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
if (DWObject) {//Currently only code 39 and code 128 are supported
document.getElementById("barcodeformat").options.add(new
Option("Code 39", 1));
document.getElementById("barcodeformat").options.add(new
Option("Code 128", 0));
}
}
Dynamic Web TWAIN 10.2 Barcode Reader Add-on supports Code 39 and Code
128 barcodes. Another independent barcode product from Dynamsoft, called
Dynamsoft Barcode Reader, supports more barcode types. They include Code 39,
Code 93, Code 128, Codabar, ITF, EAN-13, EAN-8, UPC-A, UPC-E, etc. The next
version of Dynamic Web TWAIN Barcode Reader Add-on will support all these
barcode types as well.
Now it comes to the most important part of this tutorial - barcode
reading logic. Please notice that how callback functions are used to deal with
the success and failure scenarios for barcode reading:
function GetBarcodeInfo(sImageIndex, result) {
//Retrieve barcode details
var count = result.GetCount();
if (count == 0) {
alert("The barcode for the selected format is not found.");
return;
} else {
for (I = 0; I < count; I++) {
var text = result.GetContent(I);
var x = result.GetX1(I);
var y = result.GetY1(I);
var format = result.GetFormat(I);
var barcodeText = ("barcode[" + (I + 1) + "]: " +
text + "\n");
barcodeText += ("format:" + format + "\n");
barcodeText += ("x: " + x + " y:" + y +
"\n");
alert(barcodeText);
}
}
}
//This is the function called when barcode reading fails
function GetErrorInfo (errorcode, errorstring) {
alert(errorstring);
}
function ReadBarcode() {
var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
if (DWObject) {
if (DWObject.HowManyImagesInBuffer == 0) {
alert("Please scan or load an image first.");
return;
}
//Get barcode result.
switch
(document.getElementById("barcodeformat").selectedIndex) {
case 0:
result = DWObject.Addon.Barcode.Read(
DWObject.CurrentImageIndexInBuffer, EnumDWT_BarcodeFormat.CODE_39,
GetBarcodeInfo, GetErrorInfo);
break;
case 1:
result = DWObject.Addon.Barcode.Read(
DWObject.CurrentImageIndexInBuffer, EnumDWT_BarcodeFormat.CODE_128,
GetBarcodeInfo, GetErrorInfo);
break;
default:
break;
}
}
} Barcodes are everywhere
today. They are particularly popular with retail stores, for warehouse
inventory applications, and more. Essentially, barcodes are important for
applications where easily sharing information via computers or mobile devices
is important.
As the hunger for more online information sharing and saving grows so
too does the need to process barcode information from a web application. But
how can you integrate barcode reading technology with web technologies?
If you have tried integrating a barcode with a web application before,
you will know how time-consuming the task can be. However, with the help of
Dynamsoft's Dynamic Web TWAIN 10.2 Barcode Reader Add-on, you can make it
happen in just a few minutes.
In this tutorial, I will show you step by step how to build a simple
barcode reading web application.
For this tutorial, you need a basic understanding of HTML and
JavaScript. There is no CSS involved in this demo page. We'll concentrate on
the barcode functionality in this tutorial. You can add whatever styles you
like afterward. Even if you are a novice to web programming, you will find this
tutorial easy to follow. So just take it easy and have some fun.
Here is a summary of the steps:
1. Start a Web Application
2. Add Dynamic Web TWAIN to the HTML Page
3. Scan or Load Images
4. Read Barcodes
In step 1, 2, and 3, we are integrating Dynamic Web TWAIN with your web
application. This is a prerequisite for barcode processing as, in this case,
Barcode Reader is an add-on of Dynamic Web TWAIN.
Step 1: Start a Web Application
You can get Dynamic Web TWAIN Barcode Reader Resources files either from
Dynamsoft's Dynamic Web TWAIN 9.2 free 30-day trial or the barcode sample code
we used in this tutorial.
Create an empty HTML page named readbarcode.HTML. Put it on the same
folder as the Resources folder.
Step 2: Add Dynamic Web TWAIN to the HTML Page
Include dynamsoft.webtwain.initiate.js, dynamsoft.webtwain.config.js,
and dynamsoft.webtwain.addon.barcode.js in the HTML head.
dynamsoft.webtwain.initiate.js and dynamsoft.webtwain.config.js are responsible
for Dynamic Web TWAIN's initialization, while
dynamsoft.webtwain.addon.barcode.js provides all barcode related API
interfaces:
<script type="text/javascript"
src="Resources/dynamsoft.webtwain.initiate.js"> </script>
<script type="text/javascript"
src="Resources/dynamsoft.webtwain.config.js"> </script>
<script type="text/javascript"
src="Resources/addon/dynamsoft.webtwain.addon.barcode.js">
</script>
Add a div container, and register the OnWebTwainReady event to get
access to Dynamic Web TWAIN via DWObject:
<div id="dwtcontrolContainer"></div>
<script type="text/javascript">
Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady',
Dynamsoft_OnReady); // Register OnWebTwainReady event. This event fires as soon
as Dynamic Web TWAIN is initialized and ready to be used
var DWObject;
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); //
Get the Dynamic Web TWAIN object that is embeded in the div with id
'dwtcontrolContainer'
}
Step 3: Scan or Load Images
Add Scan and Load buttons to the page:
<input type="button" value="Scan"
onclick="AcquireImage();" />
<input type="button" value="Load"
onclick="LoadImage();" /><br />
And add the implementation of function AcquireImage() and LoadImage().
Notice how LoadImage() handles success and failure with callback functions
OnSuccess() and OnFailure():
function AcquireImage() {
if (DWObject) {
DWObject.SelectSource();
DWObject.OpenSource();
DWObject.IfDisableSourceAfterAcquire = true; // Scanner source will be
disabled/closed automatically after the scan.
DWObject.AcquireImage();
}
}
//Callback functions for async APIs
function OnSuccess() {
console.log('successful');
}
function OnFailure(errorCode, errorString) {
alert(errorString);
}
function LoadImage() {
if (DWObject) {
DWObject.IfShowFileDialog = true; // Open the system's file dialog to
load image
DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess,
OnFailure); // Load images in all supported formats (.bmp,.jpg,.tif,.png,.pdf).
OnSuccess or OnFailure will be called after the operation
}
}
Step 4: Read Barcodes
Now you have two options to get the image loaded:
Scan images from a scanner (AcquireImage());
Or load hard disk images (LoadImage()).
It's time to add the Dynamic Web TWAIN Barcode Reader add-on to your web
page.
Add a selection list for supported barcode formats:
<select id="barcodeformat"></select>
And populate it in function Dynamsoft_OnReady():
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
if (DWObject) {//Currently only code 39 and code 128 are supported
document.getElementById("barcodeformat").options.add(new
Option("Code 39", 1));
document.getElementById("barcodeformat").options.add(new
Option("Code 128", 0));
}
}
Dynamic Web TWAIN 10.2 Barcode Reader Add-on supports Code 39 and Code
128 barcodes. Another independent barcode product from Dynamsoft, called
Dynamsoft Barcode Reader, supports more barcode types. They include Code 39,
Code 93, Code 128, Codabar, ITF, EAN-13, EAN-8, UPC-A, UPC-E, etc. The next
version of Dynamic Web TWAIN Barcode Reader Add-on will support all these
barcode types as well.
Now it comes to the most important part of this tutorial - barcode
reading logic. Please notice that how callback functions are used to deal with
the success and failure scenarios for barcode reading:
function GetBarcodeInfo(sImageIndex, result) {
//Retrieve barcode details
var count = result.GetCount();
if (count == 0) {
alert("The barcode for the selected format is not found.");
return;
} else {
for (I = 0; I < count; I++) {
var text = result.GetContent(I);
var x = result.GetX1(I);
var y = result.GetY1(I);
var format = result.GetFormat(I);
var barcodeText = ("barcode[" + (I + 1) + "]: " +
text + "\n");
barcodeText += ("format:" + format + "\n");
barcodeText += ("x: " + x + " y:" + y +
"\n");
alert(barcodeText);
}
}
}
//This is the function called when barcode reading fails
function GetErrorInfo (errorcode, errorstring) {
alert(errorstring);
}
function ReadBarcode() {
var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
if (DWObject) {
if (DWObject.HowManyImagesInBuffer == 0) {
alert("Please scan or load an image first.");
return;
}
//Get barcode result.
switch
(document.getElementById("barcodeformat").selectedIndex) {
case 0:
result = DWObject.Addon.Barcode.Read(
DWObject.CurrentImageIndexInBuffer, EnumDWT_BarcodeFormat.CODE_39,
GetBarcodeInfo, GetErrorInfo);
break;
case 1:
result = DWObject.Addon.Barcode.Read(
DWObject.CurrentImageIndexInBuffer, EnumDWT_BarcodeFormat.CODE_128,
GetBarcodeInfo, GetErrorInfo);
break;
default:
break;
}
}
}
Now, save the file.
Okay, we are all set. You can open readbarcode.HTML in a browser and
start barcode reading.
Conclusion
Article Source: http://EzineArticles.com/9068251
Now, save the file.
Okay, we are all set. You can open readbarcode.HTML in a browser and
start barcode reading.