Angular、React 和 Vue 的动态 Web TWAIN 编程

Dynamsoft

0/5 (0投票)

2019年8月27日

CPOL

8202

在本文中，我们将揭示如何将 Dynamic Web TWAIN SDK 集成到 Angular、React 和 Vue 中

根据 StackOverflow 2019 调查的统计数据，Angular、React 和 Vue 是最受欢迎的三大 Web 开发框架。它们各自拥有忠实的用户群。无论您喜欢哪种 Web 框架，都可以从本文中获益，我们将揭示如何将 Dynamic Web TWAIN SDK 集成到这些 Web 框架中。我们的最终目标是帮助开发者构建企业级的 Web 文档扫描和管理应用程序。

什么是 Dynamic Web TWAIN？

Dynamic Web TWAIN 是一款基于浏览器的文档扫描 SDK，专为 Web 应用程序设计。它是一款跨平台 SDK，支持 Windows、Linux 和 macOS。

只需几行 JavaScript 代码，开发者就可以轻松地将强大的文档扫描功能集成到 Web 应用程序中。除了文档扫描，Dynamic Web TWAIN 还提供图像编辑、保存、上传等功能。

Angular 的 Dynamic Web TWAIN

通过命令行工具全局安装 Angular CLI

npm install -g @angular/cli

安装 Dynamic Web TWAIN 及相应的 TypeScript 定义

npm install dwt @types/dwt --save

创建一个新项目

ng new web-document-scan

第一步是修改 UI。打开 _src\app\app.component.html_ 并将默认代码替换为

<button (click)="acquireImage()">Scan Document</button>
<div id="dwtcontrolContainer"></div>

按钮点击事件的实现位于 _src\app\app.component.ts_ 中。

导入接口 OnInit

import { Component, OnInit } from
'@angular/core';

重写 OnInit 定义的回调方法 ngOnInit()

export class AppComponent implements OnInit {
  title = 'web-document-scan';
  DWObject: WebTwain;
  ngOnInit() {
    
  }
}

在 ngOnInit() 中设置和初始化 Dynamic Web TWAIN 的环境。需要一个有效的试用许可证。

ngOnInit() {
    Dynamsoft.WebTwainEnv.AutoLoad = false;
    Dynamsoft.WebTwainEnv.Containers = [{ ContainerId: 'dwtcontrolContainer', Width: '583px', Height: '513px' }];
    Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', () => { this.Dynamsoft_OnReady(); });
    Dynamsoft.WebTwainEnv.Trial = true;
    Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";  
    Dynamsoft.WebTwainEnv.Load();
  }

Dynamsoft_OnReady(): void {
    this.DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    this.DWObject.IfShowUI = false;
  }

获取一个免费的 30 天试用许可证并按如下方式使用

Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";

添加绑定到 UI 按钮的 acquireImage() 函数

acquireImage(): void {
    if (this.DWObject.SelectSource()) {
      const onAcquireImageSuccess = () => { this.DWObject.CloseSource(); };
      const onAcquireImageFailure = onAcquireImageSuccess;
      this.DWObject.OpenSource();
      this.DWObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);
    }
  }

运行 Angular 应用

ng serve –open

源代码

https://github.com/dynamsoft-dwt/angular-cli-application

React 的 Dynamic Web TWAIN

安装 Dynamic Web TWAIN

npm install dwt @types/dwt --save

使用 npx 创建一个 React 项目

npx create-react-app web-document-scan

创建一个新的类 WebTwain 并将其保存为 _WebTwain.js_ 文件。

import React, { Component } from 'react';
import './WebTwain.css';
import Dynamsoft from 'dwt';

export class WebTwain extends Component {
  constructor(props) {
    super(props);

    Dynamsoft.WebTwainEnv.AutoLoad = false;
    Dynamsoft.WebTwainEnv.Trial = true;
    Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";
  }

  loadDWT() {
    Dynamsoft.WebTwainEnv.Load();
  }

  handleClick() {
    var dwObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    if (dwObject) {
      var bSelected = dwObject.SelectSource();
      if (bSelected) {
        var onAcquireImageSuccess = function () { dwObject.CloseSource(); };
        var onAcquireImageFailure = onAcquireImageSuccess;
        dwObject.OpenSource();
        dwObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);
      }
    } else {
      alert("Please press 'Load DWT' first!");
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.loadDWT}>Load DWT</button><span>   </span>
        <button onClick={this.handleClick}>Scan Document</button>
        <div id="dwtcontrolContainer"></div>
      </div>
    );
  }
}

获取一个免费的 30 天试用许可证并按如下方式使用

Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";

将自定义 React 组件 WebTwain 添加到 _src\App.js_ 文件中

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {WebTwain} from './WebTwain';

function App() {
    return (
      <div className="App">
        <h2>Dynamic Web TWAIN with React</h2>
        <WebTwain/>
      </div>
    );
}

export default App;

运行 React 应用

npm start

源代码

https://github.com/dynamsoft-dwt/react

Vue 的 Dynamic Web TWAIN

安装 Vue CLI 和 Dynamic Web TWAIN

npm install -g @vue/cli
npm install dwt @types/dwt --save

创建项目

vue create web-document-scan

在 _src\App.vue_ 中将默认的 HelloWorld 组件 替换为 dwt 组件

<template>
  <div id="app">
    <dwt/>
  </div>
</template>

<script>
import dwt from "./components/dwt.vue";

export default {
  name: "app",
  components: {
    dwt
  },
};
</script>

在 _src\components_ 文件夹下创建一个 _dwt.vue_ 文件。

<template>
  <div id="DWTcontainer" class="container">
    <button id="btnScan" @click="acquireImage()">Scan</button>
    <div id="dwtcontrolContainer"></div>
  </div>
</template>

<script>
import Dynamsoft from "dwt";

export default {
  name: "dwt",
  data() {
    return {
      title: "Using Dynamic Web TWAIN in Vue Project",
      DWObject: false
    };
  },
  created() {
    Dynamsoft.WebTwainEnv.AutoLoad = false;
    Dynamsoft.WebTwainEnv.ProductKey ="LICENSE-KEY";
    Dynamsoft.WebTwainEnv.Containers = [
      { ContainerId: "dwtcontrolContainer", Width: "583px", Height: "513px" }
    ];
    Dynamsoft.WebTwainEnv.RegisterEvent("OnWebTwainReady", () => {
      this.Dynamsoft_OnReady();
    });
  },
  mounted() {
    Dynamsoft.WebTwainEnv.Load();
  },
  methods: {
    Dynamsoft_OnReady() {
      this.DWObject = Dynamsoft.WebTwainEnv.GetWebTwain("dwtcontrolContainer");
    },

    // Acquire Image
    acquireImage() {
      this.DWObject.IfDisableSourceAfterAcquire = true;
      this.DWObject.AcquireImage();
    }
  }
};
</script>

<style>
#dwtcontrolContainer > div {
    margin: 0 auto;
} 
</style>

获取一个免费的 30 天试用许可证并按如下方式使用

Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";

运行 Vue 应用

npm run serve

源代码

https://github.com/dynamsoft-dwt/vue-simple-document-scan

技术支持

如果您在使用 Dynamic Web TWAIN SDK 时有任何疑问，请随时联系 support@dynamsoft.com。

发布历史

15.0 (06/27/2019)

新内容

[HTML5 | Windows] 添加了一个新方法 startScan，它接受一个 JSON 对象来指定所有扫描参数。这使得发起扫描作业更加简单快捷。同时，您可以通过在同一个 JSON 对象中添加额外的输出参数来指定您希望如何处理扫描数据。
[HTML5 | Windows] 添加了一个新的异步事件 OnPostTransferAync，作为现有同步事件 OnPostTransfer 的异步对应。关于传输图像的信息将在事件监听器中返回。
[HTML5 | Windows] 添加了一个新的 PDF 核心 DLL 作为 PDF 编码和解码的默认引擎。这个新的 PDF DLL 增加了对 JPEG2000 和 JBIG2 压缩类型的支持。
[HTML5 | Windows] 添加了一个新方法 PDF.Write.Setup，它接受一个 JSON 对象，其中包含创建 PDF 文件所需的所有参数。
[HTML5 | Mac] 为 macOS 版本添加了一个新文件 _libDynamicImg.dylib_，它提供与 Windows 版本文件 _DynamicImage.dll_ 相同的功能。本质上，这个文件提供了更好的图像编码和解码。
[HTML5] 添加了一对方法 IndexToImageID 和 ImageIDToIndex，用于将图像的索引转换为其图像 ID，反之亦然。图像 ID 是一个唯一的数字，可用于指定图像。
[HTML5] 添加了一个新事件 OnIndexChangeDragDropDone，当您拖放图像以在查看器中重新排序时会触发此事件。该事件返回操作的起始和结束索引。
已改进
[HTML5] 改进了 AcquireImage 方法，在其参数 optionalDeviceConfig 中增加了两个选项 IfGetImageInfo 和 IfGetExtImageInfoto，它们默认值为 true，这意味着将为每个传输的图像返回额外的图像信息。
[HTML5 | Windows] 改进了 SetFileXferInfo 方法，以便在传输模式为 Disk File 时，您可以为传输的图像指定命名模式。
[HTML5] 通过允许两个耗时的操作同时进行，提高了 Dynamsoft Service 的性能。受影响的方法包括 ConvertToBlob、ConvertToBase64、GenerateURLForUploadedData 以及一些 HTTP 上传方法。
[HTML5] 通过移除可选端口并无论 64 位服务还是 32 位服务都使用相同的端口，提高了服务连接效率。此外，在初始化期间，JavaScript 将尝试直接连接到核心扫描模块，而不是先连接到服务。
[HTML5] 改进了函数 ConvertToBase64、ConvertToBlob、GenerateURLForUploadData、HTTPUpload、HTTPUploadAllThroughPostAsMultiPageTIFF、HTTPUploadAllThroughPostAsPDF、HTTPUploadThroughPost、HTTPUploadThroughPostAsMultiPagePDF、HTTPUploadThroughPostAsMultiPageTIFF、HTTPUploadThroughPostEx，以便在这些方法中操作的图像的当前索引将返回到回调函数中。这是因为在这些耗时操作期间索引可能会发生变化。
已更改
[HTML5 | Windows] 在 64 位机器上，64 位服务已成为默认选项。
已修复
[HTML5 | Windows] 修复了一个在 RDS 模式的 Chrome 中加载网络文件耗时过多的错误。
[HTML5 | Windows] 修复了一个错误，该错误可能在保存的 TIFF 文件的右边缘出现一个不想要的黑色线条。

Angular、React 和 Vue 的动态 Web TWAIN 编程

什么是 Dynamic Web TWAIN？

下载

开发者指南

API 文档

代码库

Angular 的 Dynamic Web TWAIN

源代码

React 的 Dynamic Web TWAIN

源代码

Vue 的 Dynamic Web TWAIN

运行 Vue 应用

源代码

技术支持

发布历史

15.0 (06/27/2019)