There are many of my friends have shared on CSDN over how to use Dynamic Web TWAIN call in the page document scanner. One of them enthusiastic friends Rogan bacteria, he posted a blog " How to achieve fast document scanner call in the page " trilogy, concise and easy to understand, for most of the project developers have needs in this regard reference. This article is based on a trilogy Rogan bacteria released, showing how to use the shortcut key to call the scanner to scan documents in a Web page.
Learn shortcuts
Shortcuts is not what it should do more to introduce, if you have friends have questions, can the venue and Baidu Encyclopedia. >> shortcuts _ Baidu Encyclopedia
So, how JS, set in a web page as a Web page shortcuts to a number of mouse clicks instead of it?
First of all, we have to understand each keyboard key code that corresponds to each key Keycode. Proposed reference >> Keycode table (key code table)
Secondly, we can listen for keyboard events keyup, keydown, keypress or call the function to control the interface.
Specifically how to apply to our project to scan it?
Set shortcuts scanning step
Step1
First, we passed Luogen Jun's blog "How to achieve fast document scanner call in a Web page (3)" You can learn how to use within 5 minutes Dynamic Web TWAIN to build one of the most basic simple scanning pages.
Note: The latest version of the stage for Dynamic Web TWAIN 14.3.1
Hello World code is as follows:
<!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>
Because Hello World is the easiest to achieve page scanning code, so in order to cause unnecessary equipment footprint and other issues, we can make some changes complement the Hello World code, as follows.
<!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>
From the above code is not difficult to find, call function AcquireImage () can be called scanner to scan the page.
Step2
Set keyboard shortcuts to invoke function AcquireImage (), in order to hold down the Ctrl + Q, for example.
Ctrl key code is 17, Q for the 81 key code.
//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");
});
Keydown judged by listeners and keyup Ctrl key and two keys if the Q key press, when two keys are pressed together and released, calling function AcquireImage () for page scanning.
to sum up
By shortcut call the scan function is a function of js achieve, of course, this section of code can also use shortcuts into another scene, hoping to help the reader.
