• <menu id="w2i4a"></menu>
  • logo Dynamic Web TWAIN使用教程

    文檔首頁>>Dynamic Web TWAIN使用教程>>掃描識別工具Dynamic Web TWAIN使用教程:條碼讀取器(上)

    掃描識別工具Dynamic Web TWAIN使用教程:條碼讀取器(上)


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

    Dynamic Web TWAIN最新版免費(fèi)下載>>>

    介紹

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

    環(huán)境

    Windows

    本地Web服務(wù)器

    步驟

    步驟1 創(chuàng)建一個(gè)新目錄DocumentsSeparation在其中創(chuàng)建一個(gè)新頁面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="https://tst.dynamsoft.com/libs/dwt/14.2/dynamsoft.webtwain.config.js"></script>
        <script src="https://tst.dynamsoft.com/libs/dwt/14.2/dynamsoft.webtwain.initiate.js"></script>
        <script src="https://tst.dynamsoft.com/libs/dbr/6.3/dynamsoft.barcodereader.config.js"> </script>
        <script src="https://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和幾個(gè)按鈕

    <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ì)算機(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 刷新頁面。此時(shí),你可以調(diào)用本地掃描儀加載本地圖像,或刪除所選圖像。你甚至可以直接拖動(dòng)本地圖像直接加載它

    Barcode Reader2

    Barcode Reader3

    步驟8 添加條碼識別碼,因?yàn)闂l碼有很多種類,我們先添加一個(gè)選擇框,相應(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)行分類

    使用條形碼圖像啟動(dòng)每個(gè)文檔

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

    每個(gè)頁面都有一個(gè)Barode,具有相同條形碼的圖像屬于同一個(gè)文件

    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('https://tst.dynamsoft.com/libs/dbr/modes/Mode1.png') center no-repeat">
            </li>
            <li style="width:118px; height:176px; float: left; background: url('https://tst.dynamsoft.com/libs/dbr/modes/Mode2.png') center no-repeat">
            </li>
            <li style="width:118px; height:176px; float: left; background: url('https://tst.dynamsoft.com/libs/dbr/modes/Mode3.png') center no-repeat">
            </li>
        </ul>

    效果如下:

    三種方式

    下一篇文章將為大家介紹添加分類的JavaScript代碼以及如何接受分離的文件。


    想要購買正版授權(quán),或者獲取更多Dynamic Web TWAIN相關(guān)信息的朋友可以點(diǎn)擊" 咨詢在線客服 "~
    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();