Automatic classification in document digitalization by using Barcode recognition

Introduction

Nowadays, the idea of a paperless office is becoming more and more popular, and the digitalization of paper documents has become a trend. At the same time, many industries, such as hospitals, banks, etc., still need to print documents and then digitalize them after that. Due to the time differences between different operations of the workflow, it is very likely that a large number of paper documents will pile up and wait to be scanned and classified. It is true that these tasks can be done manually, but automation can save a lot of time and effort. In this article, we share how to implement the automation through barcode in a web application.

Environment

  • Windows
  • Local web server

Steps

Step 1 Create a new directory DocumentsSeparation and create a new page in it with the name 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>

Step 2 Reference the JavaScript library

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

Note

The online JavaScript file is referenced here. In your project, you should instead reference the corresponding files in your own project. If you have previously installed the Dynamic Web TWAIN product locally, the same files can also be found in the following directory.

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

Step 3 Add a DIV and a few buttons

<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>

They'll look like this

Barcode-Reader-12.png

Step 4 Add initialization code

<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);

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

Step 5 Open index.html in the browser. If it has not been installed before, follow the prompts on the page to install the corresponding scan and Barcode recognition controls. This installation process only needs to be done once on each computer

Barcode-Reader-1.png

Typically they are installed to

C:\Windows\SysWOW64\Dynamsoft\DynamsoftService

The following are the major files used in the article.

DynamsoftService.exe

dwt_trial_15.0.0.0625.dll

DynamsoftBarcodeReaderx64_6.5.2.dll

dbr_6.5.2.0625.dll

Step 6 Add code for the buttons

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();
}

Step 7 Refresh the page. At this point, you can call the local scanner or load the local image, or delete the selected image. You can even drag a local image directly to load it directly

Barcode-Reader-2.png Barcode-Reader-3.png

Step 8 Add the Barcode recognition code, because there are many types of Barcode, we first add a selection box, the corresponding code is as follows

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;

Step 9 There are three ways to do the classification of documents

  • Start each document with an image with barcode
  • Use the images with barcode as the separator only without including them in any document
  • Each page has a Barode and the image with the same Barcode belongs to the same file

Barcode-Reader-4.png

We'll implement all three ways in our code

<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>
</div>

Now the page looks like this

Barcode-Reader-13.png

Step 10 Add JavaScript code for the classification

function UploadFiles() {
    DWObject.IfShowProgressBar = false;
    ProcssedImagesCount = 0;
    imageArrays = [];
    aryIndicesMode1 = [];
    aryIndicesMode2 = [];
    aryIndicesMode3 = {
        'noBarcode': []
    };
    Dynamsoft.Lib.showMask();
    ReadBarcode(0);
}

function ReadBarcode(i) {
    var j, sImageIndex = i,
        bBarcodeFound = false,
        strSelectedMode = document.getElementsByName('UploadModes');
    for (j = 0; j < strSelectedMode.length; j++) {
        if (strSelectedMode.item(j).checked == true) {
            strSelectedMode = strSelectedMode.item(j).value;
            break;
        }
    }
    if (sImageIndex == DWObject.HowManyImagesInBuffer)
        return;
    if (dbrObject) {
        var settings = dbrObject.getRuntimeSettings();
        settings.mBarcodeFormatIds = BarcodeInfo[document.getElementById("barcodeformat").selectedIndex].val;
        dbrObject.updateRuntimeSettings(settings);
        DWObject.CurrentImageIndexInBuffer = sImageIndex;
        var barcodeImage = DWObject.GetImageURL(sImageIndex, -1, -1);
        dbrObject.decode(barcodeImage).then(function (results) {
            ProcssedImagesCount++;
            if (results.length == 0) {
                console.log("No barcode found on image " + (sImageIndex + 1));
                if (bBarcodeFound == true) {
                    bBarcodeFound = false;
                    aryIndicesMode1[aryIndicesMode1.length - 1].push(sImageIndex);
                    if (aryIndicesMode2.length == 0)
                        aryIndicesMode2.push([sImageIndex]);
                    else
                        aryIndicesMode2[aryIndicesMode2.length - 1].push(sImageIndex);
                } else {
                    if (aryIndicesMode1.length == 0)
                        aryIndicesMode1.push([sImageIndex]);
                    else
                        aryIndicesMode1[aryIndicesMode1.length - 1].push(sImageIndex);
                    if (aryIndicesMode2.length == 0)
                        aryIndicesMode2.push([sImageIndex]);
                    else
                        aryIndicesMode2[aryIndicesMode2.length - 1].push(sImageIndex);
                }
                aryIndicesMode3.noBarcode.push(sImageIndex);
            } else {
                bBarcodeFound = true;
                console.log("Barcode found on image " + (sImageIndex + 1));

                aryIndicesMode1.push([sImageIndex]);
                if (aryIndicesMode2.length == 0)
                    aryIndicesMode2.push([]);
                else if (aryIndicesMode2[aryIndicesMode2.length - 1].length != 0)
                    aryIndicesMode2.push([]);
                var barcodeOnThisImage = [],
                    allKeys = [];
                for (j = 0; j < results.length; j++) {
                    var result = results[j];
                    var barcodeText = result.BarcodeText;
                    if (barcodeOnThisImage.indexOf(barcodeText) == -1)
                        barcodeOnThisImage.push(barcodeText);
                    console.log("The content for barcode number " + (j + 1) + "is: " + barcodeText);
                    var imageArray = {
                        index: sImageIndex,
                        text: barcodeText
                    };
                    imageArrays.push(imageArray);
                }

                Dynamsoft.Lib.each(aryIndicesMode3, function (value, key) {
                    allKeys.push(key);
                });

                for (j = 0; j < allKeys.length; j++) {
                    var oKey = allKeys[j];
                    if (barcodeOnThisImage.indexOf(oKey) != -1) {
                        barcodeOnThisImage.splice(barcodeOnThisImage.indexOf(oKey), 1);
                        var _value = aryIndicesMode3[oKey];
                        if (_value.indexOf(sImageIndex) == -1) {
                            _value.push(sImageIndex);
                            aryIndicesMode3[oKey] = _value;
                        }
                    }
                }
                for (j = 0; j < barcodeOnThisImage.length; j++) {
                    aryIndicesMode3[barcodeOnThisImage[j]] = [sImageIndex];
                }
            }
            if (ProcssedImagesCount == DWObject.HowManyImagesInBuffer) {
                ProcssedImagesCount = 0;
                var aryTemp = [];
                Dynamsoft.Lib.each(aryIndicesMode3, function (value, key) {
                    aryTemp.push(value);
                });
                aryIndicesMode3 = aryTemp;
                Dynamsoft.Lib.hideMask();
                switch (strSelectedMode) {
                    case 'mode1':
                        console.log(aryIndicesMode1);
                        break;
                    case 'mode2':
                        console.log(aryIndicesMode2);
                        break;
                    case 'mode3':
                        console.log(aryIndicesMode3);
                        break;
                }
            }
            /*
             * Read the next image
             */
            ReadBarcode(sImageIndex + 1);
        }, function (ex) {
            console.log("Error reading barcode: " + ex.message);
            Dynamsoft.Lib.hideMask();
        });
    }
}

Load a few images and click "Separate", then check the browser console (F12)

Barcode-Reader-5.png Barcode-Reader-6.png Barcode-Reader-7.png Barcode-Reader-8.png

Step 11 Add upload code and back-end code (in C#) to receive the separated files

function UploadImagesSeparatedByBarcode(ary) {
    var i, Digital, uploadfilename, CurrentPathName = unescape(location.pathname),
        CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1),
        strActionPage = CurrentPath + "SaveToFile.aspx";
    DWObject.IfSSL = Dynamsoft.Lib.detect.ssl;
    var _strPort = location.port == "" ? 80 : location.port;
    if (Dynamsoft.Lib.detect.ssl == true)
        _strPort = location.port == "" ? 443 : location.port;
    DWObject.HTTPPort = _strPort;
    strFullActionPagePath = location.protocol + "//" + location.hostname + ":" + DWObject.HTTPPort + strActionPage;
    for (i = 0; i < ary.length; i++) {
        if (ary[i].length == 0) {
            ary.splice(i, 1);
            i--;
            continue;
        }
        Digital = new Date();
        uploadfilename = 'Doc_' + i + '_' + Digital.getMilliseconds() + '_' + (Math.floor(Math.random() * 1000 + 1)).toString() + '.pdf';
        DWObject.HTTPUpload(strFullActionPagePath, ary[i], EnumDWT_ImageType.IT_PDF, EnumDWT_UploadDataFormat.Binary, uploadfilename, function () { }, function () { });
    }
}
<%@ Page Language="C#" %>
<%
    try
    {
        HttpFileCollection files = HttpContext.Current.Request.Files;
        HttpPostedFile uploadfile = files["RemoteFile"];
        String Path = System.Web.HttpContext.Current.Request.MapPath(".") + "/ImageScanned/";
        if (!System.IO.Directory.Exists(Path))
        {
            System.IO.Directory.CreateDirectory(Path);
        }
        uploadfile.SaveAs(Path + uploadfile.FileName);
    }
    catch
    {    }
%>

Step 12 Change code to upload files

Update the following

switch (strSelectedMode) {
    case 'mode1': console.log(aryIndicesMode1); break;
    case 'mode2': console.log(aryIndicesMode2); break;
    case 'mode3': console.log(aryIndicesMode3); break;
}

to

switch (strSelectedMode) {
    case 'mode1': UploadImagesSeparatedByBarcode(aryIndicesMode1); break;
    case 'mode2': UploadImagesSeparatedByBarcode(aryIndicesMode2); break;
    case 'mode3': UploadImagesSeparatedByBarcode(aryIndicesMode3); break;
}

Step 13 Refresh the page, load the images again and click "Separate". Then you can check the uploaded images on the server

Barcode-Reader-9.png

For mode 2, 3

Barcode-Reader-10.png

Barcode-Reader-11.png

That's it. You can also test the code online.

results matching ""

    No results matching ""

    results matching ""

      No results matching ""