用Vue.js做一个组件化的WebTWAIN扫描仪应用

用Vue.js做一个组件化的WebTWAIN扫描仪应用

前端组件化是最近前端开发的趋势，组件化的应用可以快速地将组件装载与卸载以灵活地应对需求变更。在这篇文章里，我将用Vue.js与Dynamic Web TWAIN构建一个组件化的文档扫描Web应用。为了让应用更加的美观，我使用了Vuetify作为界面库。

准备工作

如果你还没有安装Dynamic Web TWAIN，那么可以去https://www.dynamsoft.com/dynamic-webtwain/webtwain-download 下载安装以及申请一个密钥。现代化的前端应用需要Node.js提供本地运行环境以及包管理工具。如果你是初次接触现代前端应用的开发，可以前往 https://nodejs.dev 下载安装。 当上述工具都安装完成后，我们需要安装vue-cli来帮助我们创建与管理项目。在终端命令行输入以下代码完成vue-cli的安装。 npm install -g @vue/cli

创建项目

通过vue-cli，我们可以快速地基于模板创建一个vue项目。在终端内输入vue create dwt-vue，创建一个名为dwt-vue的项目。vue-cli会在创建项目前提供一些选项，因为我们暂时只有一个页面，也没有利用全局状态管理工具，因此其他项目常见的依赖，如vuex与vue-router，在这里不是必须的。 当dwt-vue被成功创建之后，在终端内将工作目录切换到dwt-vue文件夹下，然后在终端内输入以下命令，安装vuetify与Dynamic Web TWAIN。

vue add vuetify
npm install dwt

将Dynamic Web TWAIN与项目集成

我们在前一步已经安装了Dynamic Web TWAIN (dwt)。但对于开发而言还需要进行额外的配置。 首先，我们需要额外借助ncp帮我们在项目调试与打包前后复制文件。如果你的环境中没有安装ncp，可以通过npm install ncp进行安装。安装完成后，我们打开package.json对命令进行一些修改。

"scripts": {
   
    "serve": "ncp node_modules/dwt/dist public/resources/dwt && vue-cli-service serve",
    "build": "vue-cli-service build && ncp node_modules/dwt/dist public/resources/dwt",
    "lint": "vue-cli-service lint"
  }

我们将ncp node_modules/dwt/dist public/resources/dwt分别添加在serve命令之前、build命令之后，以保证我们的dwt依赖独立的被打包到发布文件夹中。因为dwt在初始化的时候需要从指定位置加载额外的文件进行配置，因此保证整个dwt库的相对独立非常的重要。 最后，我们在public文件夹下创建我们刚才指定的目录。

cd public
mkdir resources
cd resources
mkdir dwt

功能实现

加载Dynamic Web TWAIN

完成配置任务后，我们可以开始写代码实现需要的功能了。首先，我们在src/components下先创建一个DWT.vue文件，当然，你也可以选择直接修改模板创建的HelloWorld.vue。

<template>
  <div id="dwt-container">
  </div>
</template>

<script>
import dwt from 'dwt'

export default {
    
  name: 'dwt',
  data () {
    
    return {
    
      dwt: {
    
        obj: null,
        id: 'dwtObject',
        licenseKey: ''
      }
    }
  },
  mounted () {
    
    this.mountDWT()
  },
  methods: {
    
    mountDWT () {
    
      return new Promise((res, rej) => {
    
        this.unmountDWT()
          .then(() => {
    
            dwt.WebTwainEnv.UseLocalService = true;
            dwt.WebTwainEnv.ResourcesPath = "resources/dwt";
            dwt.WebTwainEnv.ProductKey = this.dwt.licenseKey
            dwt.WebTwainEnv.AutoLoad = false;
            dwt.WebTwainEnv.Containers = [];
            dwt.WebTwainEnv.IfAddMD5InUploadHeader = false;
            dwt.WebTwainEnv.IfConfineMaskWithinTheViewer = false;
            let dwtConfig = {
     WebTwainId: this.dwt.id }
            // By default, use local service is true
            dwt.WebTwainEnv.CreateDWTObjectEx(
                  dwtConfig, 
                  (dwtObject) => {
     this.dwt.obj = dwtObject; res(true);},
                  (errStr) => {
     console.log(`failed to initialize dwt, message: ${
      errStr}`); rej(false);}
            )
          })
      })
    },
    /**
     * Delete dwt instance
     */
    unmountDWT () {
    
      return new Promise((res, rej) => {
    
        if (dwt.WebTwainEnv.DeleteDWTObject(this.dwt.id)) {
    
          res(true)
        } else {
    
          rej(false)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>

然后，我们回到App.vue文件，引入DWT。 首先修改

<script>
import HelloWorld from './components/HelloWorld';
import DWT from './components/DWT';

export default {
   
  name: 'App',
  components: {
   
    HelloWorld,
    DWT
  },
  data: () => ({
   
    //
  }),
};
</script>

接着，我们将添加到模板中

<v-main>
    <HelloWorld/>
    <DWT />
</v-main>

对我们修改过的文件进行保存，随后在终端中敲下npm run serve，启动我们的项目。如果一切顺利，你将看到编译成功的提示，并通过给出的地址访问app。

登录页面后，如果你看到开发者工具中的console面板没有报错，或者你通过Vue开发者工具看到Dwt下已经有了dwt instance的信息，证明我们成功的引入了Dynamic Web TWAIN。

实现扫描功能

现在，我们来实现app的第一个功能，也是最基本的功能。我们通过调用DWT的接口，从扫描仪获取图像。 首先，我们把HelloWorld从App.vue内移除，然后回到DWT.vue中，添加一个按钮。然后在<script>部分调用相关的接口完成功能。按钮通过设置click事件调用方法完成扫描任务。 <template>部分：

<div id="dwt-control">
  <v-btn color="primary" large depressed @click="acquireImage">
    Scan
  </v-btn>
</div>

在<script>部分，向methods添加以下方法:

acquireImage () {
   
      const dwtObj = this.dwt.obj
      if (dwtObj) {
   
        if (dwtObj.UseLocalService) {
   
          let configure = {
   
            IfShowUI: true, // Show the setting UI of scanner
            PixelType: dwt.EnumDWT_PixelType.TWPT_SRGB, // Color type, can be black & white, grayscale, color
            Resolution: 300,  // Resolution of scanning
            IfFeederEnabled: false,
            IfDuplexEnabled: false,
            IfDisableSourceAfterAcquire: true
          }
          dwtObj.SelectSource(
            function () {
   
              var onAcquireSuccess = function () {
    dwtObj.CloseSource() }
              var onAcquireFailure = function () {
    dwtObj.CloseSource() }
              dwtObj.OpenSource()
              dwtObj.AcquireImage(configure, onAcquireSuccess, onAcquireFailure)
            }
          )
        } else {
   
          // Load externally
          dwtObj.LoadImageEx('', -1)
        }
      }
    }

保存修改，如果你关闭了服务，现在可以通过npm run serve重新启动，如果你未关闭服务，那么可以刷新页面尝试我们刚刚添加的功能。

绑定预览窗口

我们完成了扫描功能，但是扫描上来的图像还无法查看，我们需要一个预览窗口用来展示。在DWT.vue中，我们添加一个<div>用于存放预览窗口。

<div
    :id="this.viewer.id" 
    :style="{
       width: this.viewer.width, height: this.viewer.height }"
>
    <!-- DWT viewer -->
</div>

在<script>部分，我们对data添加一些字段用于保存我们的预览窗口配置参数。

viewer: {
   
    id: 'dwtViewer',
    obj: null,
    width: '100%',
    height: '400px'
}

然后，我们在methods部分添加初始化代码

bindViewer () {
   
      if (!this.dwt.obj) {
   
        alert('WebTwain Object has not been initialized yet.')
      } else {
   
        const dwtObj = this.dwt.obj
        let viewOptions = {
   
          width: this.viewer.width,
          height: this.viewer.height,
          view: {
   
            bShow: true,
            Width: '100%',
          }
        }
        if (dwtObj.BindViewer(this.viewer.id, viewOptions)