如何使用快捷键在网页中调用扫描仪进行扫描 - 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实现的功能,当然此段快捷键代码也可以运用到别的场景之中,希望对读者有所帮助。

你可能感兴趣的:(Dynamic,Web,TWAIN)