如何使用快捷键在网页中调用扫描仪进行扫描

有很多朋友已经在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 usedvar 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 functionkey_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实现的功能，当然此段快捷键代码也可以运用到别的场景之中，希望对读者有所帮助。

如何使用快捷键在网页中调用扫描仪进行扫描 - Dynamic Web TWAIN相关推荐

网页中调用matlab,在C#的Web项目中调用Matlab代码的步骤
在C#的Web项目中调用Matlab代码的方法为了毕设的图形检索方向的研究,本人需要在信科的师兄师姐们已经完成的C#界面中,调用现在研究的算法的Matlab代码,以便看到实验的效果.前段时间已经拖延 ...
浅谈Dynamic Web TWAIN SDK、Dynamsoft Service及扫描仪TWAIN驱动的区别（从版本13开始）
Dynamic Web TWAIN SDK是一款帮助实现网页文档扫描的SDK,使用它可以轻易地通过几行HTML/JavaScript代码来实现一个可以直接连接扫描仪扫描的网页. 但是在实际开发和应用过 ...
如何快速实现在网页中调用文档扫描仪 (2)
上一篇我们简单介绍了扫描仪开发/集成的一些基本背景,说道如果要在网页程序中直接调用本机连接的USB扫描仪,目前是无法直接通过JavaScript 来调用的. 很久以前比较流行的做法是通过使用Activ ...
如何快速实现在网页中调用文档扫描仪 (1)
扫描仪的使用在银行.保险和政府行业中非常普遍.有些公司甚至一天要扫描数以万计的文档,电子化后并归档保存. 过去常见的做法是,使用扫描仪自带的桌面软件来完成所有的扫描工作,然后再打开自己的工作平台(应用 ...
在网页中调用摄像头实现拍照上传 - 高拍仪二次开发
在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的办事处,比如银行.护照办理中心.税务等,我们可能会注意到办公桌上摆着这样一台机器.办公人员用它拍摄各种证件.文件.表格,有时候还 ...
c++ 二次开发良田高拍仪_在网页中调用摄像头实现拍照上传 - 高拍仪二次开发...
来源于 https://blog.csdn.net/weixin_40659738/article/details/78252562 在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的 ...
在网页中调用本地的应用程序
在网页中调用本地的应用程序例子: <script> function exec (command) { window.oldOnError = window.onerror; ...
在网页中调用打印预览及打印设置
在网页中调用打印预览及打印设置以下内容为程序代码: <OBJECT id=WB classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 heig ...
js调用vlc_在网页中调用VLC插件
在网页中调用html播放器, 结果还是有些视频虽然是mp4的,但可能因为太大(有3G),所以无法播放, 解决办法是使用vlc插件,Chrome以前,默认不启用这种插件, chrome v45以后已经无 ...

如何使用快捷键在网页中调用扫描仪进行扫描 - Dynamic Web TWAIN

了解快捷键

设置快捷键扫描步骤

总结

如何使用快捷键在网页中调用扫描仪进行扫描 - Dynamic Web TWAIN相关推荐

最新文章

热门文章