Acquire images from TWAIN/SANE scanner in HTML+JavaScript application

In This Topic

This tutorial shows how to create a blank HTML page with JavaScript code in text editor and acquire images from TWAIN or SANE scanner in HTML+JavaScript application. HTML+JavaScript application can be used in Windows and Linux.

Here are steps, which must be done:

Create a folder for HTML+JavaScript application.
Create the folder, for example "MyJavaScriptTwainScanningDemo", for the HTML+JavaScript application.
Add the installer of VintaSoft Web TWAIN service to the HTML+JavaScript application.
- Add "Data" folder inside "MyJavaScriptTwainScanningDemo" folder.
- If the web application will be used in web browser on Windows computer
  - Download Windows installer of VintaSoft Web TWAIN service (Windows edition) from URL: https://www.vintasoft.com/zip/VintasoftWebTwainService-15.0.5.zip
  - Copy the downloaded file VintasoftWebTwainService-15.0.5.zip into "MyJavaScriptTwainScanningDemo\Data\" folder.
    The installer of VintaSoft Web TWAIN service (Windows edition) will be necessary if VintaSoft Web TWAIN service is not installed on local Windows computer.
- If the web application will be used in web browser on Debian/Ubuntu computer
  - Download DEB-installer of VintaSoft Web TWAIN service (Linux edition) from URL: https://www.vintasoft.com/zip/VintasoftWebTwainService-15.0.5.deb
  - Copy the downloaded file VintasoftWebTwainService-15.0.5.deb into "MyJavaScriptTwainScanningDemo\Data\" folder.
    The installer of VintaSoft Web TWAIN service (Linux edition) will be necessary if VintaSoft Web TWAIN service is not installed on Debian/Ubuntu computer.
- If the web application will be used in web browser on Fedora computer
  - Download RPM-installer of VintaSoft Web TWAIN service (Linux edition) from URL: https://www.vintasoft.com/zip/VintasoftWebTwainService-15.0.5.rpm
  - Copy the downloaded file VintasoftWebTwainService-15.0.5.rpm into "MyJavaScriptTwainScanningDemo\Data\" folder.
    The installer of VintaSoft Web TWAIN service (Linux edition) will be necessary if VintaSoft Web TWAIN service is not installed on Fedora computer.
Add Vintasoft JavaScript files to the HTML+JavaScript application.
- Add the "Scripts" folder to the "MyJavaScriptTwainScanningDemo" folder.
- Get Vintasoft.Shared.js and Vintasoft.Twain.js files from "<SDK_install_path>\Bin\JavaScript\" folder of VintaSoft TWAIN .NET SDK installation or from npm-package 'vintasoft-web-twain-js'. Copy Vintasoft JavaScript files to the "Scripts" folder.

Add JavaScript code, which acquires an image from TWAIN scanner and displays the scanned image, to the HTML page of HTML+JavaScript application.

Create a blank HTML page "index.html" in "MyJavaScriptTwainScanningDemo" folder.

Add references to Vintasoft JavaScript files to the HTML page:

Here is HTML code that adds references to Vintasoft JavaScript files:

HTML

<html>
<head>
    <title>JavaScript TWAIN Scanning Demo</title>

    <script src="Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="Scripts/Vintasoft.Twain.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Add HTML markup (an image element that will display image acquired from TWAIN scanner) to the HTML page:

Here is HTML markup code:

HTML

<html>
<head>
    <title>JavaScript TWAIN Scanning Demo</title>

    <script src="Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="Scripts/Vintasoft.Twain.js" type="text/javascript"></script>
</head>
<body>
    <div style="text-align: center">
        <h3>Preview of scanned image</h3>
        <input type="image" id="previewImage" alt="Preview of scanned image" style="border: 1px solid black; width: 350px; height: 350px" />
        <br />
        <br />
        <div id="vintasoftWebTwainServiceInstallerLinkId" hidden>
            <a id="VSWebTwainService_WindowsInstallerUrl" href="Data/VintasoftWebTwainService-15.0.5.zip" hidden>Download Windows installer of VintaSoft Web TWAIN service</a>
            <a id="VSWebTwainService_LinuxDebInstallerUrl" href="Data/VintasoftWebTwainService-15.0.5.deb" hidden>Download Linux installer (DEB-package) of VintaSoft Web TWAIN service</a>
            <a id="VSWebTwainService_LinuxRpmInstallerUrl" href="Data/VintasoftWebTwainService-15.0.5.rpm" hidden>Download Linux installer (RPM-package) of VintaSoft Web TWAIN service</a>
        </div>
    </div>
</body>
</html>

Add JavaScript code that acquires an image from TWAIN scanner and displays the scanned image:

Here is JavaScript code that acquires images from TWAIN scanner and displays the scanned image:

JavaScript

<html>
<head>
    <title>JavaScript TWAIN Scanning Demo</title>

    <script src="Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="Scripts/Vintasoft.Twain.js" type="text/javascript"></script>
</head>
<body>
    <div style="text-align: center">
        <h3>Preview of scanned image</h3>
        <input type="image" id="previewImage" alt="Preview of scanned image" style="border: 1px solid black; width: 350px; height: 350px" />
        <br />
        <br />
        <a id="vintasoftWebTwainServiceInstallerLinkId" href="/Data/VintasoftWebTwainService-15.0.5.zip" hidden>Download installer of VintaSoft Web TWAIN service</a>
    </div>

    <script type="text/javascript">
    // acquire images from TWAIN/SANE scanner
    __acquireImageFromTwainScanner();



    /**
    * Acquires images from TWAIN/SANE scanner.
    */
    function __acquireImageFromTwainScanner() {
        // register the evaluation version of VintaSoft Web TWAIN service
        // please read how to get evaluation license in documentation: https://www.vintasoft.com/docs/vstwain-dotnet-web/Licensing-Twain_Web-Evaluation.html
        Vintasoft.Twain.WebTwainGlobalSettingsJS.register('REG_USER', 'REG_URL', 'REG_CODE', 'EXPIRATION_DATE');

        // URL to the VintaSoft Web TWAIN service
        var serviceUrl = 'https://localhost:25329/api/VintasoftTwainApi';
        // a Web API controller that allows to work with TWAIN and SANE devices
        var twainService = new Vintasoft.Shared.WebServiceControllerJS(serviceUrl);

        // TWAIN/SANE device manager
        var deviceManager = new Vintasoft.Twain.WebTwainDeviceManagerJS(twainService);

        // the default settings of device manager
        var deviceManagerInitSetting = new Vintasoft.Twain.WebTwainDeviceManagerInitSettingsJS();

        try {
            // open device manager
            deviceManager.open(deviceManagerInitSetting);
        }
        catch (ex) {
            __showVintasoftWebTwainServiceInstallerDownloadUrl();
            document.getElementById('vintasoftWebTwainServiceInstallerLinkId').hidden = false;
            alert(ex.message + "\n\nIf VintaSoft Web TWAIN service is installed on your computer, please close this dialog and click 'Read troubleshooting guide' link at the top of this page.\n\nIf VintaSoft Web TWAIN service is NOT installed on your computer or installed old version, please close this dialog, click 'Download installer of VintaSoft Web TWAIN service' link at the top of this page, download VintaSoft Web TWAIN service, manually install/reinstall the service on your computer, reload this web page in web browser (Firefox must be restarted) and try to scan images once again.");
            return;
        }

        var device = null;
        try {
            // get the default TWAIN/SANE device
            device = deviceManager.get_DefaultDevice();
            // open device without UI
            device.open(false, true);

            var acquireModalState;
            do {
                // do one step of modal image acquisition process
                var acquireModalResult = device.acquireModalSync();
                // get state of image acquisition
                acquireModalState = acquireModalResult.get_AcquireModalState().valueOf();

                switch (acquireModalState) {
                    case 2:   // image is acquired
                        // get acquired image
                        var acquiredImage = acquireModalResult.get_AcquiredImage();
                        // get image as Base64 string
                        var bitmapAsBase64String = acquiredImage.getAsBase64String();
                        // update image preview
                        var previewImageElement = document.getElementById('previewImage');
                        previewImageElement.src = bitmapAsBase64String;
                        break;
                    case 4:   // image scan is failed
                        alert(acquireModalResult.get_ErrorMessage());
                        break;
                    case 9:   // image scan is finished
                        break;
                }
            }
            while (acquireModalState !== 0);
        }
        catch (ex) {
            alert(ex);
        }
        finally {
            if (device != null) {
                // close the device
                device.close();
            }
            // close the device manager
            deviceManager.close();
        }
    }


    /**
     * Returns the name of user OS.
     * @returns Name of user OS.
     */
    function __getUserOS() {
        const userAgent = window.navigator.userAgent,
            platform = window.navigator?.userAgentData?.platform || window.navigator.platform,
            macosPlatforms = ['macOS', 'Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
            windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
            iosPlatforms = ['iPhone', 'iPad', 'iPod'];
        let os = null;

        if (macosPlatforms.indexOf(platform) !== -1) {
            os = 'Mac OS';
        } else if (iosPlatforms.indexOf(platform) !== -1) {
            os = 'iOS';
        } else if (windowsPlatforms.indexOf(platform) !== -1) {
            os = 'Windows';
        } else if (/Android/.test(userAgent)) {
            os = 'Android';
        } else if (/Linux/.test(platform)) {
            os = 'Linux';
        }

        return os;
    }

    /**
     * Shows links, which allow to download installer of VintaSoft Web TWAIN service.
     */
    function __showVintasoftWebTwainServiceInstallerDownloadUrl() {
        var userOS = __getUserOS();
        if (userOS == 'Windows') {
            document.getElementById("VSWebTwainService_WindowsInstallerUrl").hidden = false;
        }
        else if (userOS == 'Linux') {
            document.getElementById("VSWebTwainService_LinuxDebInstallerUrl").hidden = false;
            document.getElementById("VSWebTwainService_LinuxRpmInstallerUrl").hidden = false;
        }
    }
    </script>
</body>
</html>

Upload HTML+JavaScript application to a web server.
Upload HTML+JavaScript application to a web server.
This is obligatory step, because VintaSoft Web TWAIN service does not work if HTML page is opened from file system, i.e. HTML page has URL "file:///somepath" and application is used as desktop application. Please use VintaSoft TWAIN .NET SDK if you want to create a desktop application for TWAIN scanning.
Open HTML page of HTML+JavaScript application and see the result.

If VintaSoft Web TWAIN service is not installed on your computer (you see an alert with error message), you should do the following steps:
- click the "Download installer of VintaSoft Web TWAIN service" link
- download the installer of VintaSoft Web TWAIN service to your computer
- install the VintaSoft Web TWAIN service to your computer
- reload the application page in web browser

Send Feedback

Create a folder for HTML+JavaScript application.

Add the installer of VintaSoft Web TWAIN service to the HTML+JavaScript application.

Add Vintasoft JavaScript files to the HTML+JavaScript application.

Add JavaScript code, which acquires an image from TWAIN scanner and displays the scanned image, to the HTML page of HTML+JavaScript application.

Upload HTML+JavaScript application to a web server.

Open HTML page of HTML+JavaScript application and see the result.