使用 JavaScript 和 jQuery 进行文档扫描

最新推荐文章于 2024-05-25 09:39:20 发布

慧都小妮子

最新推荐文章于 2024-05-25 09:39:20 发布

阅读量795

点赞数 29

文章标签： javascript jquery 开发语言

本文链接：https://blog.csdn.net/m0_67129275/article/details/139061290

版权

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 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" οnclick="AcquireImage();" />
<input type="button" value="Load" οnclick="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" οnclick="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 的扫描仪才会列在“选择源”对话框中。如果您手头没有真正的扫描仪，您可以安装虚拟扫描仪进行测试，这就是我所做的。如果您有扫描仪，但它没有显示在列表中，

扫描样本页后，它看起来像这样：

是的，您可以通过单击“保存”按钮将其另存为 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);});
}
}