How to Build a Web App to Read PDF417 Barcode with DWT
Mar 09, 2015
If you have upgraded to the latest HTML5 version of DWT(Dynamic Web TWAIN), probably you have noticed that it only supports 1D barcode reading. Although the 2D barcode SDK has not been officially released yet, it is coming soon. Today, I’d like to demo how to build a Web application to read PDF417 barcode with DWT in advance.
PDF417 Barcode Reading Steps
- Scan or load an image of a driver’s license.
- Get barcode results from DWT native server.
- Display results in corresponding fields on Web client side.
Web Scanning App with Dynamic Web TWAIN
Install Dynamic Web TWAIN.
Create index.html with the following code:
<!DOCTYPE html>
<html>
<head>
<title>Use Dynamic Web TWAIN to Read Barcode</title>
<style>
#mainWindow {
width:600px;
margin:0px auto;
padding:15px;
background-color:#eee;
}
</style>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"> </script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"> </script>
</head>
<body>
<div id="mainWindow">
<H1> Dynamic Web TWAIN - Driver's Licenses</H1>
<input type="button" value="Scan" onclick="AcquireImage();" />
<input type="button" value="Load" onclick="LoadImage();" />
<input type="button" value="Read Driver License" onclick="ReadBarcode();" /> <br/>
First Name: <input type="text" id="FirstName" />
Last Name: <input type="text" id="LastName"/> <br />
City: <input type="text" id="City" />
Address: <input type="text" id="Address" />
License Number: <input type="text" id="LicenseNumber" /> <br />
State: <input type="text" id="State" />
Zip: <input type="text" id="Zip" />
<!-- dwtcontrolContainer is the default div id for Dynamic Web TWAIN control.
If you need to rename the id, you should also change the id in the dynamsoft.webtwain.config.js accordingly. -->
<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;
var text;
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'
}
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
}
}
function GetField(keyword) {
var k = text.search(keyword);
var n = text.indexOf(":", k);
var m = text.indexOf("\n", n);
var subtext = text.substring(n+1, m);
return subtext;
}
function GetBarcodeInfo(sImageIndex, result) {//This is the function called when barcode is read successfully
//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++) {
text = result.GetContent(i);
var x = result.GetX1(i);
var y = result.GetY1(i);
var format = result.GetFormat(i);
var barcodeText = ("barcode[" + (i + 1) + "]: " + "\n" + text + "\n");
//barcodeText += ("format: PDF 417" + "\n");
//barcodeText += ("x: " + x + " y:" + y + "\n");
//var strBarcodeString = text + "\r\n" + (format == 4 ? "Code 39" : "Code 128");
//DWObject.AddText(DWObject.CurrentImageIndexInBuffer, x, y, strBarcodeString, -1, 94700, 0, 1);
// alert(barcodeText); // get driver license info
alert(text);
if (text.search("Given Name") == -1)
document.getElementById("FirstName").value = GetField("First Name");
else
document.getElementById("FirstName").value = GetField("Given Name");
document.getElementById("LastName").value = GetField("Last Name");
document.getElementById("LicenseNumber").value = GetField("License Number");
document.getElementById("State").value = GetField("State");
document.getElementById("City").value = GetField("City");
document.getElementById("Address").value = GetField("Address");
document.getElementById("Zip").value = GetField("Zip");
}
}
}
function ReadBarcode() {
if (DWObject) {
if (DWObject.Addon.Barcode.GetLocalVersion() == "9, 6, 2, 303") {
if (DWObject.HowManyImagesInBuffer == 0) {
alert("Please scan or load an image first.");
return;
}
result = DWObject.Addon.Barcode.Read(
DWObject.CurrentImageIndexInBuffer, 1024, GetBarcodeInfo, OnFailure);
}
else {
DWObject.Addon.Barcode.Download("\\Resources\\Barcode.zip",ReadBarcode,OnFailure);
}
}
}
</script>
</div>
</body>
</html>
Deploy the project to your Web server, and test it.