Create A Thumbnails Viewer

With Dynamic Web TWAIN, you can put 2 controls on the same page to simulate thumbnails + main viewers.

How to define two controls within one page

In the HtmlPage.html

<html>
<head>
<title>Thumbnails</title>
</head><body>
<!-- Put two DIVs to hold the DWT controls -->
<div id="dwtcontrolContainer" style="float:left; width: 120px;"></div>
<div id="dwtcontrolContainerLargeViewer" style="float:left;"></div>
<!-- Put two DIVs to hold the DWT controls -->
<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script> 
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script> 
<script type="text/javascript">
  var DWObject, DWObjectLargeViewer;
  Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);
  function Dynamsoft_OnReady() {
    /* create a thumbnail */
    DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); 
    /* create a large viewer */
    DWObjectLargeViewer = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainerLargeViewer');
  }

In the dynamsoft.webtwain.config.js

Dynamsoft.WebTwainEnv.Containers = [{ContainerId:'dwtcontrolContainer', Width: 120, Height: 350}, {ContainerId:'dwtcontrolContainerLargeViewer', Width: 270, Height: 350},];

Dynamsoft.WebTwainEnv.ProductKey = '******';

...

Below is what it looks like:

NOTE: the control on the left has a view mode of 1*5 and the one on the right has a view mode of 1*1 and it is set to hold only 1 image at a time.

DWObject.SetViewMode(1, 5);
/* This is actually the default setting */
DWObjectLargeViewer.SetViewMode(1, 1);
/* Set it to hold one image only */     
DWObjectLargeViewer.MaxImagesInBuffer = 1; 

image020

With the above implementation, you only need to use the object on the left (the thumbnails for scanning/editing/uploading, etc. The main viewer shows only the current image. When the current image changes, you need to update the main viewer. For example, when you click on one of the images in the thumbnails, you need to copy it to the main viewer:

DWObject.RegisterEvent("OnMouseClick", Dynamsoft_OnMouseClick); 
function Dynamsoft_OnMouseClick(index) {
  updateLargeViewer();
}
function updateLargeViewer() {
  /* Copy the image you just clicked on to the clipboard */
  DWObject.CopyToClipboard(index);
  /* Load the same image from clipboard into the large viewer */
  DWObjectLargeViewer.LoadDibFromClipboard(); 
}

The code shown above uses the system's clipboard to move images between the viewers. There are 2 other ways to achieve the same thing as shown below.

1. Use base64 binary (ConvertToBase64), this is slower than the above solution because it takes time to convert to/from base64 binary.

function updateLargeViewer() {
  DWObject.ConvertToBase64 (
    [DWObject.CurrentImageIndexInBuffer], 
    EnumDWT_ImageType.IT_JPG, 
    function(result) {
      DWObjectLargeViewer.LoadImageFromBase64Binary(result.getData(0, result.getLength()), EnumDWT_ImageType.IT_JPG);
    },
    function(errorCode, errorString) {
      console.log("ErrorCode: "+errorCode +"\r"+"ErrorString:"+ errorString);
    });
}

2. Use the image's URLs (GetImageURL):

function updateLargeViewer() {
  if(DWObject._ssl)
    DWObjectLargeViewer.HTTPPort = DWObject._portSSL;
  else
    DWObjectLargeViewer.HTTPPort = DWObject._port;
  var imgURL = DWObject.GetImageURL(DWObject.CurrentImageIndexInBuffer);
  DWObjectLargeViewer.HTTPDownloadEx(DWObject._ip,imgURL.substring(imgURL.indexOf('img')-1),3);
}