91伊人网,国产精品女同,日本在线AA

使用 JavaScript 和 jQuery 進行文檔掃描

翻譯|行業資訊|編輯：胡濤|2024-05-20 11:33:49.770|閱讀 86 次

概述：在本教程中，我們將指導您構建一個簡單的 HTML 頁面來掃描文檔并使用 Dynamic Web TWAIN SDK 將其保存為 PDF 文件，歡迎查閱~

Dynamic Web TWAIN SDK 是一款基于瀏覽器的文檔掃描 SDK，完全支持掃描儀和數碼相機的 JavaScript 編程。借助此功能強大的 SDK，可以輕松從網絡瀏覽器捕獲圖像和文檔，從而提高文檔處理效率。

Dynamic Web TWAIN是一款純 JavaScript SDK，可與所有流行的 JavaScript 庫和框架無縫集成，包括 jQuery、React、Vue.js、Angular.js 等，提供流暢的開發體驗。

在本教程中，我們將指導您構建一個簡單的 HTML 頁面來掃描文檔并使用 Dynamic Web TWAIN SDK 將其保存為 PDF 文件。此外，我們還將介紹批量掃描多個頁面并將其另存為 PDF，以及使用 OCR 將紙質文檔掃描為可搜索的 PDF 文件，所有這些都在 Web 應用程序中進行。

Dynamic Web TWAIN 最新版下載

Dynamic Web TWAIN SDK 的主要特性

與 Windows、 macOS和Linux平臺上的 Internet Explorer（32 位或 64 位）、Edge、Chrome、Firefox、Safari 兼容。
支持移動相機的圖像捕獲和邊框裁剪功能。
廣泛支持 TWAIN 掃描儀、數碼相機和其他 TWAIN 設備。
包括旋轉、裁剪、鏡像、翻轉、擦除等基本編輯操作。
提供多種保存選項，包括本地磁盤、Web 服務器、數據庫、SharePoint 文檔庫等。

使用 JavaScript 實現文檔掃描

步驟1：啟動 Web 應用程序

下載Dynamic Web TWAIN并注冊30 天免費試用許可證。

安裝后，默認可以在C:> Program Files > (x86) > Dynamsoft > Dynamic Web TWAIN SDK {版本號} Trial找到。

1.1. 將Dynamsoft的Resources文件夾復制到您的項目中

通常可以從以下位置復制 Resources 文件夾
C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK {Version Number} {Trial}\

資源文件夾

1.2. 創建一個空的 HTML 頁面

請將空HTML頁面與Resources文件夾放在一起，如下圖：

資源和HTML

步驟 2. 將 Dynamic Web TWAIN 添加到 HTML 頁面

2.1 - 在 <head> 標簽中包含兩個 Dynamsoft 的 JS 文件。

<script src="Resources/dynamsoft.webtwain.initiate.js"></script>
<script src="Resources/dynamsoft.webtwain.config.js"></script>

2.2.將 Dynamic Web TWAIN 容器添加到 <body> 標記中。

<div id="dwtcontrolContainer" ></div>

步驟 3：使用 Dynamic Web TWAIN 掃描或加載圖像

在頁面中添加掃描和加載按鈕：

<input type="button" value="Scan" onclick="AcquireImage();" />
<input type="button" value="Load" onclick="LoadImage();" >

并添加函數 AcquireImage() 和 LoadImage() 的實現。

//Callback functions for async APIs
function OnSuccess() {
console.log('successful');
}

function OnFailure(errorCode, errorString) {
alert(errorString);
}

function AcquireImage() {
if (DWObject) {
DWObject.SelectSource(function () {
DWObject.OpenSource();
OnAcquireImageSuccess = OnAcquireImageFailure = function () {
DWObject.CloseSource();
};
DWObject.AcquireImage(
{
IfShowUI: false,
PixelType: Dynamsoft.DWT.EnumDWT_PixelType.TWPT_RGB,
Resolution: 200,
IfDisableSourceAfterAcquire: true
},
OnAcquireImageSuccess,
OnAcquireImageFailure
);
})
}
}

function LoadImage() {
if (DWObject) {
DWObject.IfShowFileDialog = true; // Open the system's file dialog to load image
DWObject.LoadImageEx("", Dynamsoft.DWT.EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure); // Load images in all supported formats (.bmp, .jpg, .tif, .png, .pdf). OnSuccess or OnFailure will be called after the operation
}
}

現在我們有兩個選項可以將文檔加載到 Dynamic Web TWAIN 中：

從掃描儀掃描文檔（AcquireImage()）；
或者加載硬盤文檔（LoadImage()）。

步驟 4：將圖像另存為 PDF 文件

讓我們向網頁添加一個保存按鈕：

<input type="button" value="Save" onclick="SaveWithFileDialog();" />
<form>
<label>
<input type="radio" name="imgType" id="imgTypejpeg" value="jpeg" checked>
JPEG
</label>
<br>
<label>
<input type="radio" name="imgType" id="imgTypetiff" value="tiff">
TIFF
</label>
<br>
<label>
<input type="radio" name="imgType" id="imgTypepdf" value="pdf">
PDF
</label>
</form>

添加保存文檔為PDF的邏輯：

function SaveWithFileDialog() {
if (DWObject) {
if (DWObject.HowManyImagesInBuffer > 0) {
DWObject.IfShowFileDialog = true;
DWObject.SaveAllAsPDF("DynamicWebTWAIN.pdf", OnSuccess, OnFailure);
}
}
}

現在，保存文件。

就是這樣。恭喜。您剛剛在大約 5 分鐘內構建了一個網頁，該網頁可以掃描或加載文檔并將其另存為 PDF 文件。

您可以在瀏覽器中打開網絡文檔掃描應用程序并進行測試。單擊“掃描”按鈕后頁面如下所示：

動態 Web TWAIN 掃描頁面

請注意，只有兼容 TWAIN 的掃描儀才會列在“選擇源”對話框中。如果您手頭沒有真正的掃描儀，您可以安裝虛擬掃描儀進行測試，這就是我所做的。如果您有掃描儀，但它沒有顯示在列表中，

掃描樣本頁后，它看起來像這樣：

掃描后的動態 Web TWAIN 掃描頁面

是的，您可以通過單擊“保存”按鈕將其另存為 PDF 文件。

更進一步

上面的例子很簡單，功能也很好。但有時，您可能想更進一步。例如，如何自動將文檔保存為 PDF，而無需手動單擊“保存”按鈕？

使用Dynamic Web TWAIN 的事件機制，實際上相當容易做到。

Dynamic Web TWAIN 提供了許多事件供用戶訂閱。當達到某些觸發點時，事件就會被觸發。例如，我們有一個用于鼠標單擊的click事件，一個用于結束傳輸一張圖像的OnPostTransfer事件等。

因此，在函數 Dynamsoft_OnReady() 的末尾，只需添加：

function SaveWithFileDialog() {
if (DWObject) {
if (DWObject.HowManyImagesInBuffer > 0) {
DWObject.IfShowFileDialog = true;
if (document.getElementById("imgTypejpeg").checked == true) {
//If the current image is B&W
//1 is B&W, 8 is Gray, 24 is RGB
if (DWObject.GetImageBitDepth(DWObject.CurrentImageIndexInBuffer) == 1)
//If so, convert the image to Gray
DWObject.ConvertToGrayScale(DWObject.CurrentImageIndexInBuffer);
//Save image in JPEG
DWObject.SaveAsJPEG("DynamicWebTWAIN.jpg", DWObject.CurrentImageIndexInBuffer);
}
else if (document.getElementById("imgTypetiff").checked == true)
DWObject.SaveAllAsMultiPageTIFF("DynamicWebTWAIN.tiff", OnSuccess, OnFailure);
else if (document.getElementById("imgTypepdf").checked == true)
DWObject.SaveAllAsPDF("DynamicWebTWAIN.pdf", OnSuccess, OnFailure);
}
}
}

function Dynamsoft_OnReady() {
DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'
if (DWObject) {
DWObject.RegisterEvent('OnPostAllTransfers', function(){setTimeout(SaveWithFileDialog,20);});
}
}