SANE Scanner Access Using JavaScript on Linux

Xiao Ling
3 min readAug 30, 2016

--

Dynamic Web TWAIN is a document scanning SDK that allows developers to build document management solutions in JavaScript. The beta version of Dynamic Web TWAIN for Linux is available for download. This post will illustrate how to build a simple web application to scan documents from a SANE scanner on Ubuntu 14.04.

Document Management with SANE Scanner and HTML5

Download

Download Resources package, which contains Dynamic Web TWAIN JavaScript library and backend SANE scanning service.

A Simple HTML Document

Create a simple web page helloworld.html.

  1. Include webtwain.initiate.js and dynamsoft.webtwain.config.js to the HTML document.

<head>
<title>Use Dynamic Web TWAIN to Scan</title>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
</head>

2. Create a div element for Dynamic Web TWAIN control.

<div id=”dwtcontrolContainer”></div>

If you want to rename the id, you should also change the id in thedynamsoft.webtwain.config.js accordingly.

3. Register an onReady event, which will be triggered as soon as Dynamic Web TWAIN is initialized and ready to be used.

var DWObject;

function Dynamsoft_OnReady() {

DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');

if (DWObject) {

DWObject.ImageCaptureDriverType = 3;

var count = DWObject.SourceCount;

for (var i = 0; i < count; i++)
document.getElementById("source").options.add(new Option(DWObject.GetSourceNameItems(i), i));

}
}

According to the operating system, you need to specify the corresponding driver type. By default, you do not need to set driver type for Windows. As for Linux, the value of driver type is 3:

DWObject.ImageCaptureDriverType = 3;

4. Acquire an image according to the selected SANE scanner source.

function AcquireImage() {

if (DWObject) {

var OnAcquireImageSuccess, OnAcquireImageFailure;

OnAcquireImageSuccess = OnAcquireImageFailure = function (){

DWObject.CloseSource();

};


DWObject.SelectSourceByIndex(document.getElementById("source").selectedIndex);

DWObject.OpenSource();

DWObject.IfDisableSourceAfterAcquire = true;

DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);

}

}

Remember to close the source when the scanning is finished!

Web Server and Deployment

  1. Install and start nginx:

sudo apt-get update
sudo apt-get install nginx
sudo nginx

2. Create a folder linux-dwt-beta under /usr/share/nginx/html/.

3. Copy Resources and helloworld.html to /usr/share/nginx/html/linux-dwt-beta.

4. Open http://localhost/dwt-linux-beta/helloworld.html in Chrome or Firefoxto scan documents. If you do not have Dynamic Web TWAIN service installed, you will see an alert dialog which asks you to downloaddynamic_web_twainx64.deb.
If you have installed dynamic_web_twainx64.deb but no source listed, please check the scanner status using scanimage:

sudo scanimage -L

Here are the running processes while the document scanning app is working in a web browser.

ps aux | grep WebTwain

Support

For more information, please visit http://labs.dynamsoft.com/linux-web-twain.htm or contact support@dynamsoft.com.

Fancy Online Demo & Video

Source Code

https://github.com/dynamsoftlabs/linux-web-twain-helloworld

--

--

Xiao Ling

Manager of Dynamsoft Open Source Projects | Tech Lover