VintaSoft Twain .NET SDK 15.3: Документация для Веб разработчика
В этом разделе
    Получение изображений со сканера изображений TWAIN/WIA/eSCL в приложении ASP.NET Core + React.js
    В этом разделе
    В этом руководстве показано, как создать пустое веб-приложение ASP.NET Core в Visual Studio .NET 2022 и получить изображения со сканера изображений TWAIN/WIA/eSCL в приложении ASP.NET Core с помощью React.js для Windows.

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

    1. Создайте пустое ASP.NET Core Web приложение.

      Откройте Visual Studio .NET 2022 и создайте новый проект приложения типа ASP.NET Core Web:

      Выберите шаблон "React.js" для ASP.NET Core Web приложения и сконфигурируйте проект для использования ASP.NET Core 6.0:

    2. Скомпилируйте проект для восстановления зависимостей.

    3. Клиентская сторона: Удалите файлы, которые не нужны в этом демо.

      • Удалите файлы "ClientApp\src\components\Counter.js", "ClientApp\src\components\FetchData.js", "ClientApp\src\components\Home.js", "ClientApp\src\components\NavMenu.js", "ClientApp\src\components\NavMenu.css" - эти React компоненты не нужны в этом демо.

      • Удалите файлы "WeatherForecast.cs" и "Controllers\WeatherForecastController.cs" - WeatherForecast Web API контроллер не нужен в этом демо.

      • Откройте файл "ClientApp\src\components\Layout.js" и удалите строки "import { NavMenu } from './NavMenu';" и "<NavMenu />" - для этого демо не требуется навигационное меню.

      • Откройте файл "ClientApp\src\AppRoutes.js" и удалите код, который использует следующие React компоненты: Home, FetchData, Counter - эти React компоненты не нужны в этом демо.
        Вот исходный код файла "AppRoutes.js" после обновления: 
        import * as React from 'react';
import { Route } from 'react-router';
import Layout from './components/Layout';

import './custom.css'

export default () => (
    <Layout>
    </Layout>
);

    4. Клиентская сторона: Добавьте инсталлятор VintaSoft Web TWAIN сервиса в ASP.NET Core Web приложение.

      • Добавьте папку "Data" в папку "ClientApp\public".
      • Загрузите ZIP-архив с Windows инсталлятором для VintaSoft Web TWAIN сервиса по ссылке https://www.vintasoft.ru/zip/VintasoftWebTwainService-15.3.10.zip и скопируйте ZIP-архив в папку "ClientApp\public\Data\".
        Веб-служба TWAIN VintaSoft - это служба Windows, которая предоставляет веб-API для доступа к сканерам изображений TWAIN/WIA/eSCL для всех пользователей локального компьютера. Более подробную информацию о сервисе VintaSoft Web TWAIN можно найти здесь: здесь .

    5. Клиентская сторона: Добавьте файлы JavaScript в веб-приложение ASP.NET Core.

      • Получите файлы Vintasoft.Shared.js и Vintasoft.Twain.js из папки "<SDK_install_path>\Bin\JavaScript\" установки VintaSoft TWAIN .NET SDK или из npm-пакета 'vintasoft-web-twain-js' ( https://www.npmjs.com/package/vintasoft-web-twain-js ). Скопируйте файлы Vintasoft JavaScript в папку "ClientApp\public\".

      • Добавьте ссылки на файлы Vintasoft JavaScript в заголовок файла "ClientApp\public\index.html": 
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <base href="%PUBLIC_URL%/" />
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
-->

    <script src="Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="Vintasoft.Twain.js" type="text/javascript"></script>

    <title>ASP.NET Core + React.js TWAIN scanning demo</title>
</head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
-->
  </body>
</html>

    6. Клиентская сторона: создание компонента React.js, который получает изображения со сканера изображений TWAIN/WIA/eSCL и отображает отсканированные изображения.

      • Создайте файл "TwainScanningDemo.js", который будет содержать исходные коды компонента React.js (класс TwainScanningDemo):
        • Выберите контекстное меню "Добавить => Новый элемент..." для папки "ClientApp\src\components\" => Появится диалоговое окно "Добавить новый элемент"
        • Выберите тип "Файл JavaScript" для нового элемента
        • Установите "TwainScanningDemo.js" в качестве имени элемента
        • Нажмите кнопку "Добавить" => диалоговое окно будет закрыто, а файл "TwainScanningDemo.js" будет добавлен в папку "ClientApp\src\components\"
      • Добавьте объявление класса TwainScanningDemo с функцией render (отображает заголовок демонстрации и элемент изображения, который будет отображать изображение, полученное со сканера изображений TWAIN/WIA/eSCL) в файл "ClientApp\src\components\TwainScanningDemo.js":


        Вот код JavaScript компонента React.js (класс TwainScanningDemo) только с функцией 'render': 
        import React, { Component } from 'react';

export class TwainScanningDemo extends Component {
    static displayName = TwainScanningDemo.name;

    render() {
        return (
            <div class="mainDiv">
                <h1>React.js TWAIN Scanning Demo</h1>

                <h3>Preview of scanned image</h3>
                <input type="image" id="previewImage" alt="Preview of scanned image" class="previewImage" />
                <br />
                <br />
                <a id="vintasoftWebTwainServiceInstallerLinkId" href="/Data/VintasoftWebTwainService-15.3.10.zip" hidden>Download installer of VintaSoft Web TWAIN service</a>
            </div>
        );
    }
}
      • Добавьте CSS-классы, которые используются в HTML-разметке TwainScanningDemo, в файл "ClientApp\src\custom.css":


        Вот код CSS, который следует добавить в файл "ClientApp\src\custom.css": 
        .mainDiv {
    text-align: center;
}

.previewImage {
    border: 1px solid black;
    width: 350px;
    height: 350px;
}
      • Добавьте функцию componentDidMount (содержит код JavaScript, который получает изображение со сканера изображений TWAIN/WIA/eSCL и отображает отсканированное изображение) в класс TwainScanningDemo:


        Вот полный код JavaScript компонента React.js (класс TwainScanningDemo): 
        import React, { Component } from 'react';

export class TwainScanningDemo extends Component {
    static displayName = TwainScanningDemo.name;

    render() {
        return (
            <div class="mainDiv">
                <h1>React.js TWAIN Scanning Demo</h1>

                <h3>Preview of scanned image</h3>
                <input type="image" id="previewImage" alt="Preview of scanned image" class="previewImage" />
                <br />
                <br />
                <a id="vintasoftWebTwainServiceInstallerLinkId" href="/Data/VintasoftWebTwainService-15.3.10.zip" hidden>Download installer of VintaSoft Web TWAIN service</a>
            </div>
        );
    }

    componentDidMount() {
        // declare reference to the Vintasoft namespace
        let Vintasoft = window.Vintasoft;

        // acquire images from TWAIN/WIA/eSCL image scanner
        __acquireImageFromTwainScanner();


        /**
         * Acquires images from TWAIN/WIA/eSCL image scanner.
         */
        function __acquireImageFromTwainScanner() {
            // 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 devices
            var twainService = new Vintasoft.Shared.WebServiceControllerJS(serviceUrl);

            // 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) {
                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 device = null;
            try {
                // get the default device
                device = deviceManager.get_DefaultDevice();
                // open device without UI
                device.open(false);

                // a collection that stores images, which are acquired from devices and stored in memory of VintaSoft Web TWAIN service
                var acquiredImages = new Vintasoft.Twain.WebAcquiredImageCollectionJS(deviceManager);
                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();
                            // add acquired image to the image collection
                            acquiredImages.add(acquiredImage);

                            // get image as Base64 string
                            var bitmapAsBase64String = acquiredImage.getAsBase64String();
                            // update image preview
                            var previewImageElement = document.getElementById('previewImage');
                            previewImageElement.src = bitmapAsBase64String;

                            // clear image collection (delete images from memory of VintaSoft Web TWAIN service) because image is not necessary anymore
                            acquiredImages.clear();
                            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();
            }
        }
    }

}
      • Добавьте созданный компонент React.js в код приложения React.js - файл "ClientApp/src/AppRoutes.js".


        Вот исходные коды файла "App.js" после обновления: 
        import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { TwainScanningDemo } from './components/TwainScanningDemo';

import './custom.css'

export default class App extends Component {
    static displayName = App.name;

    render() {
        return (
            <Layout>
                <Route exact path='/' component={TwainScanningDemo} />
            </Layout>
        );
    }
}

    7. Запустите веб-приложение ASP.NET Core + React.js и посмотрите результат.



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

     

     

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

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