使用DWT (Dynamic Web TWAIN) 的2D Barcode插件可以轻松使用JavaScript API读取PDF417二维码信息。这里演示如何在网页中实现一个美国驾照条形码信息自动识别的Web应用。
参考文章:How to Build a Web App to Read PDF417 Barcode with DWT
步骤说明
扫描或者加载一张美国驾照图片。
从DWT的native服务进程中获取识别结果。
在Web客户端获取结果并填充到对应项中。
使用DWT SDK实现Web应用
在Resources目录中放置Barcode.zip和Barcodex64.zip。
创建index.html:
<!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>
把整个工程部署到server就可以运行测试了。
视频
源码
https://github.com/DynamsoftRD/pdf417-barcode-reader
git clone https://github.com/DynamsoftRD/pdf417-barcode-reader.git