Label-based Image Classification of Web Documents

Keywords: Front-end Javascript github

Dynamic Web TWAIN The latest version of the branch provides the Tag management interface. It is easy to label and classify the scanned images. This article shares how to use it.

Picture Classification of Web Documents

Create an HTML file and refer to the JS file of Dynamic Web TWAIN:

<script type="text/javascript" src="https://unpkg.com/dwt/dist/dynamsoft.webtwain.min.js"> </script>

Component initialization:

window.onload = function () {
    if (Dynamsoft) {
        // Get a valid trial license from https://www.dynamsoft.com/CustomerPortal/Portal/Triallicense.aspx
        Dynamsoft.WebTwainEnv.ProductKey = 't0126vQIAAGQTYLHjoyjiQ1AsFej37+JgaOeak1T7qjI1MfE2+F9KMLLf9buTDIQAxXItiLN1l7Uj0UZ+bb3OWW78Nci9DawpTRySA2ZkjhhGe7tyM+nDFHndJZ05weNCttEBk2xDM4+id3uEnfk2OmCSbWjm+c8csoin5B18WYul';
        Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', onDWTReady);
        Dynamsoft.WebTwainEnv.Load();
    }
 
};

function onDWTReady() {
    DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
}

Set some parameters, such as width, height, default label:

DWObject.Width = 480;
DWObject.Height = 640;
DWObject.SetDefaultTag('default');

Get a list of USB scanners:

let count = DWObject.SourceCount;
let select = document.getElementById("source");
 
for (let i = 0; i < count; i++) {
    let source_name = DWObject.GetSourceNameItems(i);
    let option = document.createElement('option');
    option.value = i;
    option.text = source_name;
    select.appendChild(option);
}

For the convenience of looking at the picture, the display mode of the container can be changed.

<select id="view" onchange="onViewChange()">
                    <option value="6">6x6</option>
                    <option value="5">5x5</option>
                    <option value="4">4x4</option>
                    <option value="3">3x3</option>
                    <option value="2">2x2</option>
                    <option value="1">1x1</option>
</select>
 
let view_select = document.getElementById('view');
DWObject.SetViewMode(view_select.value, view_select.value);

Add scanner function:

function scanImage() {
    if (!DWObject) return;
 
    DWObject.IfDisableSourceAfterAcquire = true;
    let bSelected = DWObject.SelectSource();
 
    if (bSelected) {
        let onSuccess, onFailure;
        onSuccess = onFailure = function () {
            DWObject.CloseSource();
        };
 
        DWObject.OpenSource();
        DWObject.AcquireImage(onSuccess, onFailure);
    }
}

Add local image loading function:

function uploadImage() {
    if (!DWObject) return;
 
    let onSuccess = function () { };
    let onFailure = function (errorCode, errorString) { };
 
    DWObject.IfShowFileDialog = true;
    DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, onSuccess, onFailure);
}

Select pictures and add labels to categorize:

let count = DWObject.SelectedImagesCount;
let indices = [];
for (let i = 0; i < count; ++i) {
    indices.push(DWObject.GetSelectedImageIndex(i));
}
DWObject.TagImages(indices, tag.value);
DWObject.FilterImagesByTag(tag.value);

Run the page in the browser.

Source code

https://github.com/yushulx/web-document-management

Posted by Paws on Wed, 02 Oct 2019 12:20:51 -0700