Acquire images from TWAIN scanner in Vue.js application

In This Topic

This tutorial shows how to create a new Vue.js application allowing to acquire images from TWAIN scanner.

Here are steps, which must be done:

Install Node.js and npm client to your computer.
- You need Node.js to create the Vue.js application. Please install Node.js to your computer if Node.js is not installed on your computer.
- The Node.js installer will also install the npm client by default.
Install the Vue.js command-line tool to your computer.
- You need Vue.js command-line tool to create the Vue.js application. Please install Vue.js command-line tool to your computer using the following console command:
  - Console
  npm install -g @vue/cli
Create a new Vue.js application.
- Create a new Vue.js application using the following console command:
  - Console
  vue create vintasoft-web-twain-vue
- Select Vue 3 for newly created application.
- Go to the created project directory using the following console command:
  - Console
  cd vintasoft-web-twain-vue

Copy Vintasoft JS- and TS-files to Vue.js application.

Add the dependency to the npm-package 'vintasoft-web-twain-js' using the following console command:
- Console
```
npm install vintasoft-web-twain-js
```
Copy Vintasoft.Shared.js and Vintasoft.Twain.js files from folder "node_modules\vintasoft-web-twain-js\dist\" to the folder "public\".

Add references to Vintasoft JavaScript files to the "public\index.html" file:

HTML

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.icoont color="darkred">%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

    <script src="Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="Vintasoft.Twain.js" type="text/javascript"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Create VintasoftWebTwain component in Vue.js application.

Create "src\components\VintasoftWebTwain.vue" file and add the component code (an image element, which displays an image acquired from TWAIN scanner; JavaScript code, which acquires an image from TWAIN scanner and displays the scanned image) to the "src\components\VintasoftWebTwain.vue" file:

JavaScript

<template>
    <div class="mainDiv">
        <h3>Preview of scanned image</h3>
        <input type="image" id="previewImage" alt="Preview of scanned image" class="previewImage" />
        <br />
        <br />
        <a href="/VSWebTwainService15.1.0.zip">Download installer of VintaSoft Web TWAIN service</a>
    </div>
</template>

<script>
    /**
    * Acquires images from TWAIN scanner.
    */
    function __acquireImageFromTwainScanner() {
        // declare reference to the Vintasoft namespace
        let Vintasoft = window.Vintasoft;

        // 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 devices
        var twainService = new Vintasoft.Shared.WebServiceControllerJS(serviceUrl);

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

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

        try {
            // open TWAIN device manager
            twainDeviceManager.open(deviceManagerInitSetting);
        }
        catch (ex) {
            if (ex.toString().startsWith('NetworkError')) {
                document.getElementById('vintasoftWebTwainServiceInstallerLinkId').hidden = false;
                alert("VintaSoft Web TWAIN service is not found.\n\nPlease close this dialog, link 'Download installer of VintaSoft Web TWAIN service' will appear at the top of this page, click the link, download VintaSoft Web TWAIN Service, manually install the service on your computer, reload this web page in web browser (Firefox must be restarted) and try to scan images once again.");
            }
            else
                alert(ex);
            return;
        }

        var twainDevice = null;
        try {
            // get an array of available TWAIN devices
            var twainDevices = twainDeviceManager.get_Devices();
            // if system does not have TWAIN devices
            if (twainDevices.length == 0) {
                alert("System does not have TWAIN devices.");
            }
            // if system has TWAIN devices
            else {
                // get the default TWAIN device
                twainDevice = twainDeviceManager.get_DefaultDevice();
                // if TWAIN device is not found
                if (twainDevice == null) {
                    alert("TWAIN device is not found.");
                }
                // if TWAIN device is found
                else {
                    // open TWAIN device (do not display device UI but display dialog with image scanning progress)
                    twainDevice.open(false, true);

                    var acquireModalState;
                    do {
                        // do one step of modal image acquisition process
                        var acquireModalResult = twainDevice.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:   // scan is failed
                                alert(acquireModalResult.get_ErrorMessage());
                                break;
                            case 9:   // scan is finished
                                break;
                        }
                    }
                    while (acquireModalState !== 0);
                }
            }
        }
        catch (ex) {
            alert(ex);
        }
        finally {
            if (twainDevice != null) {
                // close the device
                twainDevice.close();
            }
            // close the device manager
            twainDeviceManager.close();
        }
    }

    export default {
        mounted(){
            // acquire images from TWAIN scanner
            __acquireImageFromTwainScanner();
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mainDiv {
    text-align: center;
}

.previewImage {
    border: 1px solid black;
    width: 350px;
    height: 350px;
}
</style>

Read how to get the evaluation license for VintaSoft TWAIN .NET SDK here https://www.vintasoft.com/docs/vstwain-dotnet-web/Licensing-Twain_Web-Evaluation.html and get the evaluation license.
Embed JavaScript code with your evaluation license instead of code line "Vintasoft.Twain.WebTwainGlobalSettingsJS.register('REG_USER', 'REG_URL', 'REG_CODE', 'EXPIRATION_DATE');" in "src\components\vintasoft-web-twain.js" file.

Specify that Vue.js application must open "VintasoftWebTwain" component. For doing this please change code of "src\App.vue" file to the following code:

JavaScript

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <VintasoftWebTwain msg="Vue.js VintaSoft Web TWAIN"/>
</template>

<script>
import VintasoftWebTwain from './components/VintasoftWebTwain.vue'

export default {
  name: 'App',
  components: {
    VintasoftWebTwain
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Run the Vue.js application and see the result.
- Run the Vue.js application using the following console command:
  - Console
  npm run serve
- Open http://localhost:8080/ in web browser to view the website.
  
  If VintaSoft Web TWAIN service is installed on your computer, you will see the following result:
  
  If VintaSoft Web TWAIN service is not installed on your computer (you see an alert with error message), you need to 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

Install Node.js and npm client to your computer.

Install the Vue.js command-line tool to your computer.

Create a new Vue.js application.

Copy Vintasoft JS- and TS-files to Vue.js application.

Create VintasoftWebTwain component in Vue.js application.

Run the Vue.js application and see the result.