Web Document Management by Tagging Images

Dynamic Web TWAIN SDK v15.2 brings a set of new APIs for classifying images by tags. In this article, I will share how to use the latest JavaScript APIs to implement a simple web document management app from scratch.

Building Document Management App in JavaScript

Create an HTML file and include Dynamic Web TWAIN JavaScript library:

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

When launching the page first time, you will be asked to install Dynamsoft service for Windows, Linux or macOS. Once the installation is complete, refresh your web page.

Loading Dynamic Web TWAIN

Create a div element as an image viewer. By default, the SDK will search for <div id=”dwtcontrolContainer”></div> and instantiate it automatically.

Initialize Dynamic Web TWAIN component:

        window.onload = function () {
            if (Dynamsoft) {
                // Get a valid trial license from https://www.dynamsoft.com/customer/license/trialLicense/
                Dynamsoft.WebTwainEnv.ProductKey = 'LICENSE_KEY';
                Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', onDWTReady);
                Dynamsoft.WebTwainEnv.Load();
            }

        };

In the callback function onDWTReady(), get the instance of Dynamic Web TWAIN:

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

Setting parameters

Set the container size:

DWObject.Width = 480;
DWObject.Height = 640;

Set a default tag for all images:

DWObject.SetDefaultTag('default');

Get the device list:

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

Change the view mode for displaying images as many as you want:

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

dwt view mode

Tagging images

Scan documents to the web container:

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

Load images from the local file system:

        function uploadImage() {
            if (!DWObject) return;

            let onSuccess = function () { };
            let onFailure = function (errorCode, errorString) { };

            DWObject.IfShowFileDialog = true;
            DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, onSuccess, onFailure);
        }

Get the indices of selected images:

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

Add customized tags:

DWObject.TagImages(indices, tag.value);

Show the tagged images:

DWObject.FilterImagesByTag(tag.value);

Try the app.

web document management

About Dynamic Web TWAIN

Dynamic Web TWAIN is a cross-platform and browser-based document scanning SDK specifically designed for web applications. With just a few lines of JavaScript code, you can develop robust web document applications in Windows, Linux, and macOS.

Source Code

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