如何使用快捷键在网页中调用扫描仪进行扫描 - Dynamic Web TWAIN
有很多朋友已经在CSDN上分享过如何使用Dynamic Web TWAIN在网页中调用文档扫描仪。其中有一位热心的朋友罗根菌，他在博客中发布的“如何快速实现在网页中调用文档扫描仪”三部曲，简洁易懂，可供大部分有这方面项目需求的开发人员参考。本文将基于罗根菌发布的三部曲，展示如何使用快捷键调用扫描仪在网页中进行文档扫描。
了解快捷键
快捷键是什么应该不用再多做介绍，如果有朋友对此有疑问，可移步百度百科。>>快捷键_百度百科
那么，如何在网页中通过JS，为网页设置快捷键，来代替一些鼠标点击呢？
首先，我们要了解每个键盘按键的键码，即每个按键对应的Keycode。建议参考 >>Keycode对照表（键码对照表）
其次我们可以通过监听键盘事件keyup，keydown，keypress来控制接口或者function的调用。
具体该怎么应用到我们的扫描项目中呢？
设置快捷键扫描步骤
Step1
首先，我们通过罗根君的博客《如何快速实现在网页中调用文档扫描仪 (3)》，可以了解到了如何在5分钟内利用Dynamic Web TWAIN构建一个最基础简单的扫描页面。
注意：现阶段Dynamic Web TWAIN 的最新版本为14.3.1
Hello World的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
</head>
<body>
<div id="dwtcontrolContainer"></div>
<input type="button" value="Scan" onclick="AcquireImage();" />
<script type="text/javascript">
function AcquireImage() {
var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
if (DWObject) {
DWObject.SelectSource(function () {
var OnAcquireImageSuccess, OnAcquireImageFailure;
OnAcquireImageSuccess = OnAcquireImageFailure = function () {
DWObject.CloseSource();
};
DWObject.OpenSource();
DWObject.IfDisableSourceAfterAcquire = true;
DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
}, function () {
console.log('SelectSource failed!');
});
}
}
</script>
</body>
</html>
因为Hello World是最简单的能实现网页扫描的代码，所以为了引起不必要的设备占用等问题，我们可以对Hello World的代码做一些修改补充，如下。
<!DOCTYPE html>
<html>
<head>
<title>Use Dynamic Web TWAIN's built-in Events</title>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"> </script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"> </script>
</head>
<body>
<input type="button" value="Scan" onclick="AcquireImage();" />
<br />
<span id='info'></span>
<!-- dwtcontrolContainer is the default div id for Dynamic Web TWAIN control.
If you need to rename the id, you should also change the id in the dynamsoft.webtwain.config.js accordingly. -->
<div id="dwtcontrolContainer"></div>
<script type="text/javascript">
Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady); // Register OnWebTwainReady event. This event fires as soon as Dynamic Web TWAIN is initialized and ready to be used
var DWObject;
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'
}
function AcquireImage() {
if (DWObject) {
DWObject.IfDisableSourceAfterAcquire = true; // Scanner source will be disabled/closed automatically after the scan.
DWObject.SelectSource(function () { // Select a Data Source (a device like scanner) from the Data Source Manager.
var OnAcquireImageSuccess, OnAcquireImageFailure;
OnAcquireImageSuccess = OnAcquireImageFailure = function () {
DWObject.CloseSource();
};
DWObject.OpenSource(); // Open the source. You can set resolution, pixel type, etc. after this method. Please refer to the sample 'Scan' -> 'Custom Scan' for more info.
DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure); // Acquire image(s) from the Data Source. Please NOTE this is a asynchronous method. In other words, it doesn't wait for the Data Source to come back.
}, function () {
console.log('SelectSource failed!');
});
}
}
</script>
</body>
</html>
由以上代码不难发现，调用function AcquireImage()即可调用扫描仪进行网页扫描。
Step2
设置快捷键来调用function AcquireImage()，以同时按住Ctrl+Q为例。
Ctrl键码为17，Q键码为81。
//Press Ctrl+Q to start the scan, keycode for Ctrl is 17, keycode for Q is 81.
var key_pressed={};
document.addEventListener("keyup",function(e){
if (key_pressed[17] && key_pressed[81]){
AcquireImage(); //scan function
key_pressed[17]=false;
key_pressed[81]=false;
}
//console.log(e.keyCode+" is up");
});
document.addEventListener("keydown",function(e){
key_pressed[e.keyCode]=true;
//console.log(e.keyCode+" is down");
});
通过监听Ctrl键及Q键的keydown和keyup来判断两键是否同时按下，当两键被一起按下并放开时，调用function AcquireImage()以进行网页扫描。
总结
通过快捷键调用扫描功能是一种通过js实现的功能，当然此段快捷键代码也可以运用到别的场景之中，希望对读者有所帮助。