使用 JavaScript 和 jQuery 进行文档扫描-控件新闻-慧都网

使用 JavaScript 和 jQuery 进行文档扫描

翻译|行业资讯|编辑：胡涛|2024-05-20 11:33:49.770|阅读 92 次

概述：在本教程中，我们将指导您构建一个简单的 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);});
}
}

扫描文档并使用条形码作为批次分隔符

如果您想批量扫描文档然后另存为PDF怎么办？或者，如何自动分离一批中的不同文件？

我们建议您首先尝试一下此网络演示。

该演示应用程序使用户能够从 TWAIN 扫描仪和 MFP（多功能打印机）扫描文档。他们可以将它们另存为 PDF 文件，可以是单页 PDF 或多页 PDF。此外，它还利用条形码作为批次分隔符。如果页面上检测到条形码，则会创建一个新文件，并将条形码值作为文件名。

其他热门条码工具推荐

Dynamsoft Barcode Reader 是一个全面的条码扫描和解码解决方案，凭借其强大的条形码检测算法、摄像头增强功能和 OCR 功能，可以帮助快速检索复杂视频条码。

Aspose.BarCode 是一款专业的条码开发控件，可在任何平台上生成和识别条形码，特别是开发嵌入食品管理系统中的条码功能开发。

BarTender作为一款企业级的条码工具，既可以单独运行，也可以与任何其他程序集成，可以帮助食品打印标签、包装打标、智能证卡编码、标牌制作等。

除了上述工具之外，也有很多功能不错，性价比也很高的条码工具可供选择，例如TBarCode SDK/Barcode Studio/Softek等，用户可根据需求选择，也可以咨询客服了解↓↓↓

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@ke049m.cn

上一篇：3D模型格式转换工具HOOPS Exchange: 高效的CAD数据交换解决方案下一篇：使用 TX Text Control 和 C# 基于 Word 的文档比较和跟踪更改

半岛外围网上直营

在线采购

中文文档库

试用/Demo下载

开发社群