创建缩略图查看器

最新推荐文章于 2024-07-02 06:54:27 发布

Rebeccakakak

最新推荐文章于 2024-07-02 06:54:27 发布

阅读量349

点赞数

分类专栏：扫描仪的Web控件

扫描仪的Web控件专栏收录该内容

14 篇文章 0 订阅

订阅专栏

使用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）;
    }）;
}