使用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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
<!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
|
1
|
git clone https://github.com/DynamsoftRD/pdf417-barcode-reader.git
|
1284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
