在 Web 应用的图像中读取条形码
本文将向您展示如何借助 ImageCapture Suite 从 Web 应用程序中捕获或扫描的图像中解码条形码。
引言
由于其准确性和易用性，条形码已成为日常文档管理工作流程中越来越重要的一部分。您可以使用条形码来识别文档、分离批量扫描，甚至获取可靠的元数据作为文档标识符。
本文将向您展示如何借助 ImageCapture Suite 从 Web 应用程序中捕获或扫描的图像中解码条形码。
背景
Dynamsoft 的 Image Capture Suite 是一个在线图像采集和处理工具包，专为 Web 应用程序设计。它允许您从 Windows 和 Mac 上的所有主流浏览器（Internet Explorer (32 位/64 位)、Firefox、Chrome 和 Safari）中的扫描仪、网络摄像头和其他 TWAIN/UVC/WIA 兼容设备捕获图像。该工具包还附带一个条形码阅读器 SDK，可让您在线解码一维和二维条形码符号。
如果您对 SDK 感兴趣，可以从 Dynamsoft 网站下载 30 天免费试用版。
编码说明
特别说明
作为在客户端浏览器中运行的组件，JavaScript 是调用 ImageCapture Suite 的所有方法/属性/事件的首选语言
捕获/加载条形码图像
ImageCapture Suite 允许您加载现有图像或从扫描仪、网络摄像头等捕获图像。
/*-----------------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
}
使用 JavaScript 解码条形码
在我们将条形码图像加载或捕获到控件中后，我们就可以开始解码条形码符号了。
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");
}
在 Web 服务器上运行或部署应用程序
完整的源代码可以从文章中下载。
有一个“Scripts\ProductKey.js”文件，其中包含一个临时的试用产品密钥。 如果您在运行示例时遇到许可证错误，您可以从 Dynamsoft 网站下载 ImageCapture Suite 以获取有效的试用许可证。 ImageCapture Suite 30 天免费试用版下载
为了测试从不同客户端机器读取条形码，您可以将示例代码与 ImageCapture Suite 一起复制到您的 Web 服务器（IIS、Apache 或 Tomcat）。 用户只需在首次访问网页时在浏览器中下载并安装 ActiveX/插件。 有关如何部署 ImageCaptureSuite 的更多详细信息
在线演示也供您参考。
ImageCapture Suite 条形码阅读器在线演示