Create A Thumbnails View

In the HTML5 edition of version 14.0+, you can use the built-in editor of Dynamic Web TWAIN together with the main image viewer to create a thumbnails view. The following code shows how to do it.

Note:

For the ActiveX, you will still need to use two controls to simulate the thumbnails.

<!DOCTYPE html>
<html>
<head>
    <title>Thumbnails View</title>
    <script src="Resources/dynamsoft.webtwain.config.js"></script>
    <script src="Resources/dynamsoft.webtwain.initiate.js"></script>
</head>
<body>
    <div id="dwtcontrolContainer" style="float: left; margin-right:20px;"></div>
    <div id="dwtcontrolContainerLargeViewer" style="float: left;"></div>
    <script type="text/javascript">
        Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);
        var DWObject;
        function Dynamsoft_OnReady() {
            DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
            if (DWObject) {
                DWObject.Width = 200;
                DWObject.Height = 600;
                DWObject.ShowImageEditor("dwtcontrolContainerLargeViewer", 750, 600);
                DWObject.SetViewMode(1, 4);
            }
        }
    </script>
</body>
</html>

The following shows what it looks like

Explore-the-Features-5

As shown above, the built-in editor comes with many features itself. By clicking the buttons, you can scan, load, remove images and then edit them or zoom in/out to view them better.

Note:

If the DIV holding the editor isn't wide enough, the buttons are hidden group by group automatically.

All buttons are displayed by default. If you like, you can choose to hide/show one or more buttons in the file dynamsoft.webtwain.config.js.

In the dynamsoft.webtwain.config.js

The following are the default configurations, and you can edit the visibility to show/hide some buttons.

bShowAllButtons: true,
visibility: {
//only valid when bShowAllButtons is true, otherwise changing visibility does nothing
    'scan': true, 'load': true, 'print': true,
    'removeall': true, 'removeselected': true,
    'rotateleft': true, 'rotate': true, 'rotateright': true, 'deskew': true,
    'crop': true, 'erase': true, 'changeimagesize': true, 'flip': true, 'mirror': true,
    'zoomin': true, 'originalsize': true, 'zoomout': true, 'stretch': true,
    'fit': true, 'fitw': true, 'fith': true,
    'hand': true, 'rectselect': true, 'zoom': true
}

results matching ""

    No results matching ""

    results matching ""

      No results matching ""