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

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


How to sync the images between the two viewers?

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.

DWObject.RegisterEvent("OnMouseClick", Dynamsoft_OnMouseClick); 
function Dynamsoft_OnMouseClick(index) {  //triggered when you click on one of the images in the thumbnails


DWObject.RegisterEvent('OnBitmapChanged', updateLargeViewer); //triggered when an image is changed like flipped, cropped, rotated, etc

function updateLargeViewer() {
  /* Copy the current image to the clipboard */
  /* Load the same image from clipboard into the large viewer */

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 the image's URLs (GetImageURL):

function updateLargeViewer() {
    DWObjectLargeViewer.HTTPPort = DWObject._portSSL;
    DWObjectLargeViewer.HTTPPort = DWObject._port;
  var imgURL = DWObject.GetImageURL(DWObject.CurrentImageIndexInBuffer);

2. 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 (
    function(result) {
      DWObjectLargeViewer.LoadImageFromBase64Binary(result.getData(0, result.getLength()), EnumDWT_ImageType.IT_PNG);
    function(errorCode, errorString) {
      console.log("ErrorCode: "+errorCode +"\r"+"ErrorString:"+ errorString);
Is this page helpful?

Leave a Reply

Your email address will not be published.