VintaSoft Twain .NET SDK 15.1: Документация для Веб разработчика
В этом разделе
    Получение изображений от TWAIN сканера в Vue.js приложении
    В этом разделе
    В этом руководстве показано, как создать новое Vue.js приложение, позволяющее получать изображения от TWAIN сканера.

    Вот действия, которые необходимо выполнить:

    1. Установите Node.js и npm-клиент на Ваш компьютер.

      • Вам нужен Node.js, чтобы создать Vue.js приложение. Пожалуйста, установите Node.js на Ваш компьютер, если Node.js ещё не установлен.

      • Инсталлятор Node.js по умолчанию установит также npm-клиент.

    2. Установите Vue.js инструмент командной строки на ваш компьютер.

    3. Создайте новое Vue.js приложение.

      • Создайте новое Vue.js приложение, используя следующую консольную команду: 
        vue create vintasoft-web-twain-vue
      • Выберите Vue 3 для созданного приложения.

      • Перейдите в директорию созданного проекта, используя следующую консольную команду: 
        cd vintasoft-web-twain-vue

    4. Скопируйте Vintasoft JS- и TS-файлы в Vue.js приложение.

      • Добавьте ссылку на npm-пакет 'vintasoft-web-twain-js', используя следующую консольную команду: 
        npm install vintasoft-web-twain-js
      • Скопируйте файлы Vintasoft.Shared.js и Vintasoft.Twain.js из папки "node_modules\vintasoft-web-twain-js\dist\" в папку "public\".

      • Добавьте ссылки на Vintasoft JavaScript файлы к файлу "public\index.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>

    5. Создайте VintasoftWebTwain компонент в Vue.js приложении.

      • Создайте файл "src\components\VintasoftWebTwain.vue" и добавьте код компонента (image-элемент, который отображает изображение, полученное от TWAIN сканера; JavaScript код, который получает изображение от TWAIN сканера и отображает отсканированное изображение) к файлу "src\components\VintasoftWebTwain.vue": 
        <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.ru/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>
      • Прочтите как получить оценочную лицензию для VintaSoft TWAIN .NET SDK здесь https://www.vintasoft.ru/docs/vstwain-dotnet-web/Licensing-Twain_Web-Evaluation.html и получите оценочную лицензию.

      • Вставьте код JavaScript с оценочной лицензией вместо строки кода "Vintasoft.Twain.WebTwainGlobalSettingsJS.register('REG_USER', 'REG_URL', 'REG_CODE', 'EXPIRATION_DATE');" в файл "src\components\vintasoft-web-twain.js".

      • Укажите, что Vue.js приложение должно открывать "VintasoftWebTwain" компонент. Для этого измените код файла "src\App.vue" на следующий код: 
        <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. Запустите Vue.js приложение и посмотрите результат.

      • Запустите Vue.js приложение, используя следующую консольную команду: 
        npm run serve

      • Откройте http://localhost:8080/ в веб-браузере, чтобы посмотреть веб страницу Vue.js приложения.

        Если VintaSoft Web TWAIN сервис установлен на Ваш компьютер, Вы увидите следующий результат:


        Если VintaSoft Web TWAIN не установлен на Ваш компьютер (Вы увидите сообщение об ошибке), Вам нужно выполнить следующие действия:
        • нажмите на ссылку "Download installer of VintaSoft Web TWAIN service"
        • загрузите инсталлятор VintaSoft Web TWAIN сервиса на Ваш компьютер
        • установите VintaSoft Web TWAIN сервис на Ваш компьютер
        • обновите страницу приложения в браузере

     

     

    Копирайт © 2007-2025 ООО "ВинтаСофт". Все права защищены.

    Отправить отзыв