使用Dynamic Web TWAIN，您可以在同一页面上放置2个控件来模拟缩略图+主要查看器。
如何在一个页面中定义两个控件
在HtmlPage.html中
<HTML>
<HEAD>
<TITLE>缩略图</ TITLE>
</ HEAD> <BODY>
<！ - 放置两个DIV来保持DWT控件 - >
<div id =“dwtcontrolContainer”style =“float：left; width：120px;”> </ div>
<div id =“dwtcontrolContainerLargeViewer”style =“float：left;”> </ div>
<！ - 放置两个DIV来保持DWT控件 - >
<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（）{
/ *创建缩略图* /
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain（'dwtcontrolContainer'）;
/ *创建一个大型观众* /
DWObjectLargeViewer = Dynamsoft.WebTwainEnv.GetWebTwain（'dwtcontrolContainerLargeViewer'）;
}在dynamsoft.webtwain.config.js中
Dynamsoft.WebTwainEnv.Containers = [{ContainerId:'dwtcontrolContainer', Width: 120, Height: 350}, {ContainerId:'dwtcontrolContainerLargeViewer', Width: 270, Height: 350},];以下是它的样子：
注意：左侧的控件具有1 * 5的视图模式，右侧的控件具有1 * 1的视图模式，并且设置为一次仅保持1个图像。
DWObject.SetViewMode（1,5）;
/ *这实际上是默认设置* /
DWObjectLargeViewer.SetViewMode（1,1）;
/ *将其设置为仅保留一个图像* /
DWObjectLargeViewer.MaxImagesInBuffer = 1;
如何在两个视窗之间同步图像？
通过上述实现，您只需要使用左侧的对象（用于扫描/编辑/上传的缩略图等。主查看器仅显示当前图像。当前图像更改时，您需要更新主查看器。
DWObject.RegisterEvent（“OnMouseClick”，Dynamsoft_OnMouseClick）;
function Dynamsoft_OnMouseClick（index）{//当您单击缩略图中的一个图像时触发
updateLargeViewer（）;
}
DWObject.RegisterEvent（'OnBitmapChanged'，updateLargeViewer）; //当图像被更改时触发，如翻转，裁剪，旋转等
function updateLargeViewer（）{
/ *将当前图像复制到剪贴板* /
DWObject.CopyToClipboard（index）;
/ *将相同的图像从剪贴板加载到大型查看器中* /
DWObjectLargeViewer.LoadDibFromClipboard（）;
}上面显示的代码使用系统的剪贴板在查看器之间移动图像。还有其他两种方法可以实现如下所示的相同功能。
1.使用图像的URL（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）;
}2.使用base64二进制文件（ConvertToBase64），这比上面的解决方案要慢，因为转换为base64二进制文件需要时间。
function updateLargeViewer（）{
DWObject.ConvertToBase64（
[DWObject.CurrentImageIndexInBuffer]
EnumDWT_ImageType.IT_PNG，
function（result）{
DWObjectLargeViewer.LoadImageFromBase64Binary（result.getData（0，result.getLength（）），EnumDWT_ImageType.IT_PNG）;
}，
function（errorCode，errorString）{
console.log（“ErrorCode：”+ errorCode +“\ r”+“ErrorString：”+ errorString）;
}）;
}