在Dynamic Web TWAIN中使用 RequireJS
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);
}
};
源代码: