在Dynamic Web TWAIN中使用 RequireJS

最新推荐文章于 2023-08-13 21:49:08 发布

Rebeccakakak

最新推荐文章于 2023-08-13 21:49:08 发布

阅读量304

点赞数

分类专栏：扫描仪的Web控件文章标签：扫描 RequireJS

扫描仪的Web控件专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何将DynamicWebTWAIN与RequireJS结合使用，以构建Web文档扫描应用程序。主要内容包括通过不同方法使非AMD脚本与RequireJS协同工作，以及创建一个简单的HTML页面并初始化DynamicWebTWAIN。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

RequireJS是一个JavaScript文件和模块加载器，用于实现浏览器内使用的异步模块定义（AMD）API。与Node.js中使用的require()类似，我们可以使用requirejs()为Web应用程序加载任何JavaScript模块。在这篇文章中，我将分享如何将Dynamic Web TWAIN与RequireJS一起使用。如果您使用Dynamic Web TWAIN开发Web文档扫描应用程序，这篇文章值得一看哦！

RequireJS:加载全局JavaScript库

Dynamic Web TWAIN是一个传统的全局JavaScript库，它不使用define()来声明依赖项和设置模块值。我找到了三种使非AMD脚本与RequireJS一起工作的方法。

使用RequireJS作为加载器

根据RequireJS的教程，使用require()加载dynamsoft.webtwain.min.js。

requirejs(["dynamsoft.webtwain.min"], function (module) {
     
});

注意:文件名不包含.js后缀。

调试代码时，您将看到模块值未定义。不过，它并不影响Dynamic Web TWAIN的使用。

<script type="text/javascript">
function AcquireImage(){
    var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    DWObject.IfDisableSourceAfterAcquire = true;
    DWObject.SelectSource();
    DWObject.OpenSource();
    DWObject.AcquireImage();
}
</script>

如果这样做，使用RequireJS就没有意义了。我们必须让模块引用。

修改dynamsoft.webtwain.min.js

为了获得模块引用，我们可以在脚本文件的末尾添加define()。

if ("function"==typeof define&&define.amd) {
    define(function() {
        return {
            Dynamsoft: Dynamsoft
        };
    })
}

重新运行应用程序。可以得到模块引用。

requirejs(["dwt"], function (module) {
    var Dynamsoft = module.Dynamsoft;
    initializeContainer(Dynamsoft);
});

但解决方案并不怎么完美。如果需要URL，则不可能修改脚本代码。更好的方法是使用shim配置。

用shim加载非amd JavaScript库

使用shim为非AMD脚本创建配置。

require.config({
    paths: {
        "dwt": "https://www.dynamsoft.com/library/dwt/dynamsoft.webtwain.min",
    },
    shim: {
        'dwt': {　　　　　　　　
            exports: 'Dynamsoft'　　　　　　
        }
    }
});

全局变量“Dynamsoft”现在作为模块值导出。

requirejs(["dwt"], function (Dynamsoft) {
    initializeContainer(Dynamsoft);
});

构建Web文档扫描应用程序

创建一个简单的HTML页面

<!DOCTYPE html>
<html>
 
<head>
    <title>Web Document Scanner</title>
</head>
 
<body>
    <button id="scanButton">Scan</button>
    <script data-main="scripts/main" src="scripts/require.js"></script>
</body>
 
</html>

初始化Dynamic Web TWAIN

var dwtObject = null;
 
// Load Dynamic Web TWAIN.
requirejs(["dwt"], function (module) {
    initializeContainer(module);
});
 
// Create a document container
var docContainer = document.createElement('div');
docContainer.id = "docContainer";
document.body.appendChild(docContainer);
 
// Initialize the container when Dynamic Web TWAIN is ready.
function initializeContainer(Dynamsoft) {
    Dynamsoft.WebTwainEnv.CreateDWTObject(docContainer.id, function (obj) {
        dwtObject = obj;
        dwtObject.Width = 480;
        dwtObject.Height = 640;
    }, function (errorString) {
        console.log(errorString);
    });
}

触发扫描事件

// Scan documents when clicking a button.
var scanButton = document.getElementById('scanButton');
scanButton.onclick = function () {
    if (dwtObject == null) {
        alert("Dynamic Web TWAIN is not ready!");
        return;
    }
 
    dwtObject.IfDisableSourceAfterAcquire = true;
    var bSelected = dwtObject.SelectSource();
 
    if (bSelected) {
        var successCallback, failCallback;
        successCallback = failCallback = function () {
            dwtObject.CloseSource();
        };
 
        dwtObject.OpenSource();
        dwtObject.AcquireImage(successCallback, failCallback);
    }
};

源代码：

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