VintaSoft Twain .NET SDK 15.0: Documentation for Web developer
In This Topic
    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:
    1. 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.

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

    3. Create a new Vue.js application.

      • Create a new Vue.js application using the following console command:
        vue create vintasoft-web-twain-vue
        
      • Select Vue 3 for newly created application.

      • Go to the created project directory using the following console command:
        cd vintasoft-web-twain-vue
        
    4. 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:
        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:
        <!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>
        
        
    5. 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:
        <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="https://www.vintasoft.com/zip/VintasoftWebTwainService-15.0.1.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:
        <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>
        
        

    6. Run the Vue.js application and see the result.

      • Run the Vue.js application using the following console command:
        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