国产精品18在线,网站91免费入口,人妻六区

掃描識別工具Dynamic Web TWAIN使用教程：條碼讀取器（上）

翻譯|使用教程|編輯：黃竹雯|2019-02-12 09:45:57.000|閱讀 421 次

概述：本文主要介紹如何使用條形碼識別在文檔數(shù)字化中自動分類。

相關(guān)鏈接：

使用條形碼識別在文檔數(shù)字化中自動分類

介紹

現(xiàn)在，無紙化辦公的想法越來越受歡迎，紙質(zhì)文件的數(shù)字化已經(jīng)成為一種趨勢。與此同時，許多行業(yè)，如醫(yī)院，銀行等，仍然需要打印文件，然后再將其數(shù)字化。那么這將會導(dǎo)致一種情況：由于不同操作之間的時間差異，很可能會堆積大量紙質(zhì)文檔并且正等待掃描。然后，我們需要對多個文檔進(jìn)行一次性掃描，在此期間需要對文檔進(jìn)行分類。當(dāng)然，這些任務(wù)可以手動完成，但自動化可以節(jié)省大量的時間和精力。在本文中，我們將分享如何通過Web應(yīng)用程序中的條形碼實(shí)現(xiàn)自動化。

環(huán)境

Windows

本地Web服務(wù)器

步驟

步驟1 創(chuàng)建一個新目錄DocumentsSeparation在其中創(chuàng)建一個新頁面index.html

<!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Documents Separation</title>
    </head>
  <body>
  </body>
</html>

步驟2 參考核心JavaScript庫

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documents Separation</title>
    <script src="//tst.dynamsoft.com/libs/dwt/14.2/dynamsoft.webtwain.config.js"></script>
    <script src="//tst.dynamsoft.com/libs/dwt/14.2/dynamsoft.webtwain.initiate.js"></script>
    <script src="//tst.dynamsoft.com/libs/dbr/6.3/dynamsoft.barcodereader.config.js"> </script>
    <script src="//tst.dynamsoft.com/libs/dbr/6.3/dynamsoft.barcodereader.initiate.js"></script>
</head>

注意：此處引用了在線JavaScript文件。在項(xiàng)目中，你應(yīng)該引用項(xiàng)目中的相應(yīng)文件。如果你以前在本地安裝了Dynamic Web TWAIN產(chǎn)品，也可以在以下目錄中找到相同的文件。

C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK {version number} {Trial}\Resource

步驟3 添加DIV和幾個按鈕

<body>
    <input type="button" value="Scan" onclick="AcquireImage();" />
    <input type="button" value="Load" onclick="LoadImages();" />
    <input type="button" value="Delete" onclick="RemoveImages();" />
    <input type="button" value="Separate" onclick="UploadFiles();" />
    <br />
    <br />
    <div id="dwtcontrolContainer" style="float: left"></div>
</body>

效果如下：

步驟4 添加初始化代碼

<script type="text/javascript">
    var dbrObject, DWObject;
    window.onload = function () {
        if (Dynamsoft && (!Dynamsoft.Lib.env.bWin || !Dynamsoft.Lib.product.bChromeEdition)) {
            var ObjString = [];
            ObjString.push('<div class="p15">');
            ObjString.push("Current browser is not supported, please use Chrome, Firefox, Edge or IE 11");
            ObjString.push('</div>');
            Dynamsoft.WebTwainEnv.ShowDialog(400, 180, ObjString.join(''));
            if (document.getElementsByClassName("dynamsoft-dialog-close"))
                document.getElementsByClassName("dynamsoft-dialog-close")[0].style.display = "none";
        } else {
            Dynamsoft.WebTwainEnv.Load();
        }
    };
    Dynamsoft.WebTwainEnv.AutoLoad = false;
    //Dynamsoft.WebTwainEnv.ProductKey = '***';
    Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);

    dynamsoft.dbrEnv.onAutoConnectServiceSuccess = function() {
        dbrObject = new dynamsoft.BarcodeReader();
    }

    dynamsoft.dbrEnv.onAutoConnectServiceError = function(ex) {
        console.log('Initialization failed with error code: ' + (ex.message || ex));
    }
    function Dynamsoft_OnReady() {
        DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
        if (DWObject) {
            DWObject.SetViewMode(3, 3);
        }
    }
</script>

步驟5 在瀏覽器中打開index.html。如果之前未安裝，請按照頁面上的提示安裝相應(yīng)的掃描和條形碼識別控件。此安裝過程只需在每臺計算機(jī)上完成一次

Barcode Reader1

通常的安裝路徑為 C:\Windows\SysWOW64\Dynamsoft\DynamsoftService

以下是本文中使用的主要文件。

DynamsoftService.exe
dwt_trial_14.1.0.0828.dll
DynamsoftBarcodeReaderx86_6.3.dll
dbr_6.3.0.0723.dll

步驟6 添加按鈕的代碼

function AcquireImage() {
    if (DWObject) {
        DWObject.SelectSource(function () {
            var OnAcquireImageSuccess, OnAcquireImageFailure;
            OnAcquireImageSuccess = OnAcquireImageFailure = function () {
                DWObject.CloseSource();
            };
            DWObject.OpenSource();
            DWObject.IfDisableSourceAfterAcquire = true;
            DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
        }, function () {
            console.log('Failed to select a source');
        });
    }
} 
function LoadImages() {
    if (DWObject) {
        DWObject.LoadImageEx('', 5,
            function () {
            },
            function (errorCode, errorString) {
                console.log('ailed to load a file with the error code:' + errorString);
            }
        );
    }
}
function RemoveImages() {
    if (DWObject)
        DWObject.RemoveAllSelectedImages();
}

步驟7 刷新頁面。此時，你可以調(diào)用本地掃描儀加載本地圖像，或刪除所選圖像。你甚至可以直接拖動本地圖像直接加載它

Barcode Reader2

Barcode Reader3

步驟8 添加條碼識別碼，因?yàn)闂l碼有很多種類，我們先添加一個選擇框，相應(yīng)的代碼如下

HTML

<select size="1" id="barcodeformat"></select>

JavaScript

var BarcodeInfo =
    [
        { desc: "All", val: 503317503 },
        { desc: "1D Barcodes", val: 1023 },
        { desc: "QR Code", val: 67108864 },
        { desc: "PDF417", val: 33554432 },
        { desc: "DATAMATRIX", val: 134217728 },
        { desc: "AZTEC", val: 268435456 },
        { desc: "CODE_39", val: 1 },
        { desc: "CODE_128", val: 2 },
        { desc: "CODE_93", val: 4 },
        { desc: "CODABAR", val: 8 },
        { desc: "ITF", val: 16 },
        { desc: "EAN_13", val: 32 },
        { desc: "EAN_8", val: 64 },
        { desc: "UPC_A", val: 128 },
        { desc: "UPC_E", val: 256 },
        { desc: "INDUSTRIAL_25", val: 512 }
    ];
// Add the following code to the function `Dynamsoft_OnReady` mentioned above
for (var index = 0; index < BarcodeInfo.length; index++)
  document.getElementById("barcodeformat").options.add(new Option(BarcodeInfo[index].desc, index));
document.getElementById("barcodeformat").options.selectedIndex = 0;

步驟9 有三種方法可以對文檔進(jìn)行分類

使用條形碼圖像啟動每個文檔

僅使用帶條形碼的圖像作為分隔符，而不將其包含在任何文檔中

每個頁面都有一個Barode，具有相同條形碼的圖像屬于同一個文件

Barcode Reader4

我們將在代碼中實(shí)現(xiàn)這三種方式

<div style="float: left; margin-left: 20px;">
    <ul style="list-style: none; min-height: 20px;">
        <li style="width:118px; float: left; text-align: center;">
            <label for="mode1">
                <input type="radio" name="UploadModes" checked="checked" value="mode1">Mode 1</label>
        </li>
        <li style="width:118px; float: left; text-align: center;">
            <label for="mode2">
                <input type="radio" name="UploadModes" value="mode2" id="mode2">Mode 2</label>
        </li>
        <li style="width:118px; float: left; text-align: center;">
            <label for="mode3">
                <input type="radio" name="UploadModes" value="mode3" id="mode3">Mode 3</label>
        </li>
    </ul>
    <br />
    <ul style="list-style: none; min-height: 180px;">
        <li style="width:118px; height:176px; float: left; background: url('//tst.dynamsoft.com/libs/dbr/modes/Mode1.png') center no-repeat">
        </li>
        <li style="width:118px; height:176px; float: left; background: url('//tst.dynamsoft.com/libs/dbr/modes/Mode2.png') center no-repeat">
        </li>
        <li style="width:118px; height:176px; float: left; background: url('//tst.dynamsoft.com/libs/dbr/modes/Mode3.png') center no-repeat">
        </li>
    </ul>

效果如下：

三種方式