a区b区c区旧视频,18+视频网站,日本阿v免视频

国产凹凸在线-国产拗女一区二区三区-国产白白视-国产白领-国产白拍-国产白丝jk被疯狂输-国产白丝喷-国产白丝在线

Dynamic Web TWAIN教程：如何使Dynamic Web TWAIN與Polymer Shadow DOM一起使用

翻譯|使用教程|編輯：楊鵬連|2020-08-12 11:48:09.300|閱讀 222 次

概述：在本文中，我將分享如何將Dynamic Web TWAIN SDK集成到Polymer項目中，以便在Web瀏覽器中掃描文檔。

Dynamic Web TWAIN是一個專為Web應用程序設計的TWAIN掃描識別控件。你只需在TWAIN接口寫幾行代碼，就可以用兼容TWAIN的掃描儀掃描文檔或從數碼相機/采集卡中獲取圖像。然后用戶可以編輯圖像并將圖像保存為多種格式，用戶可保存圖像到遠程數據庫或者SharePoint。該TWAIN控件還支持上傳和處理本地圖像。

本文匯集了一些Dynamic Web TWAIN編程方面的常見問題，并且針對這些問題進行了回答，感興趣的朋友快來了解一下吧~

點擊下載Dynamic Web TWAIN正式版

過去，Dynamic Web TWAIN與HTML元素緊密相關。它僅允許開發人員使用HTML元素ID初始化圖像容器。同時，不支持影子DOM元素，這導致Polymer項目失敗。從最新版本16.1開始，SDK具有較低的耦合。開發人員可以使用HTML元素ID或HTML元素對象來初始化Dynamic Web TWAIN對象。在本文中，我將分享如何將Dynamic Web TWAIN SDK集成到Polymer項目中，以便在Web瀏覽器中掃描文檔。

動態Web TWAIN快速入門

復制 Dynamic Web TWAIN SDK 16.1\Resources到您的項目根目錄。
創建一個HTML文件并從GitHub 獲取完整的示例代碼：

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
    <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
</head>
<body>
    <div id="dwtcontrolContainer" ></div>
    <input type="button" value="Scan" onclick="AcquireImage();" />
    <script type="text/javascript">
    function AcquireImage() {
var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
if (DWObject) { 
DWObject.SelectSource(function () { 
var OnAcquireImageSuccess = OnAcquireImageFailure = function () {
    DWObject.CloseSource();
};
DWObject.OpenSource();
DWObject.IfDisableSourceAfterAcquire = true;
DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
            }, function () {
console.log('SelectSource failed!');
            });
        }
    }
    </script>
</body>
</html>

一個簡單的Web文檔管理應用程序完成了。雙擊HTML文件以運行Web掃描儀應用程序。

當您使用HTML元素ID初始化Dynamic Web TWAIN對象時，它將在內部使用DOM查找元素。但是，它不能與影子DOM一起使用。讓我們用HTML元素對象代替ID作為預熱：

<script type="text/javascript">
        // Get a free trial license key from //www.dynamsoft.com/CustomerPortal/Portal/Triallicense.aspx
        Dynamsoft.WebTwainEnv.ProductKey = 'LICENSE-KEY';
        Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', onReady);
        var DWObject;

        function onReady() {
            Dynamsoft.WebTwainEnv.CreateDWTObject(document.getElementById('doc-image'), function (obj) {
                DWObject = obj;
            }, function (errorString) {
                console.log(errorString)
            });
        }
    </script>

用于掃描文檔的聚合物項目

安裝Polymer CLI：

npm i -g polymer-cli

使用模板初始化Polymer項目并運行該項目：

mkdir polymer-document-scan
cd polymer-document-scan
polymer init polymer-3-starter-kit
npm start

將Dynamic Web TWAIN集成到Polymer項目中

在index.html文件中，我們在內存中創建一個HTML DIV元素以初始化Dynamic Web TWAIN對象：

<my-app></my-app>

  <script type="text/javascript">
    var DWObject;
    // Get a free trial license key from //www.dynamsoft.com/CustomerPortal/Portal/Triallicense.aspx
    // Dynamsoft.WebTwainEnv.ProductKey = 'LICENSE-KEY';
    Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', onReady);

    function onReady() {
      Dynamsoft.WebTwainEnv.CreateDWTObject(document.createElement('div'), function (obj) {
        DWObject = obj;
      }, function (errorString) {
        console.log(errorString)
      });
    }
  </script>

接下來，在src / my-view.js中的HTML模板中添加<div>和<button>元素：

class MyView1 extends PolymerElement {
  static get template() {
    return html`
      <style include="shared-styles">
        :host {
          display: block;
 
          padding: 10px;
        }
      </style>
 
      <div class="card">
      <div id="dwtcontrolContainer"></div>
      <button on-click="handleClick">scan</button>
      </div>
    `;
  }
 
  handleClick() {
    if (DWObject) {
      
    }
  }
}

刷新網頁以檢查效果：

我們如何掃描文檔并將圖像顯示到DIV元素？如果打開開發者控制臺，我們可以看到它是一個影子DOM元素：

獲取元素的JS代碼如下：

document.querySelector("body > my-app").shadowRoot.querySelector("app-drawer-layout > app-header-layout > iron-pages > my-view1").shadowRoot.querySelector("#dwtcontrolContainer")

別害怕我們可以美化src / my-view.js中的代碼：

let container = this.shadowRoot.querySelector('# dwtcontrolContainer');

要呈現文檔，請在<div>元素中添加<img>元素：

<div class="card">
        <h1>Web Document Scan</h1>
        <div><img id="image"></div>
        <button on-click="handleClick">scan</button>
</div>

然后實現掃描和顯示邏輯：

handleClick() {
    if (DWObject) {
      let image = this.shadowRoot.querySelector('#image');
      DWObject.SelectSource(function () {
          var onSuccess, onFailure;
          onSuccess = onFailure = function () {
              DWObject.CloseSource();
              image.src = DWObject.GetImageURL(DWObject.CurrentImageIndexInBuffer, 640, 480);
          };
          DWObject.OpenSource();
          DWObject.IfDisableSourceAfterAcquire = true;
          DWObject.AcquireImage(onSuccess, onFailure);
      }, function () {
          console.log('SelectSource failed!');
      });
    }

現在，Web文檔掃描應用程序通常可以在Polymer項目中工作。