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

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

    1. Создайте папку для HTML+JavaScript приложения.

      Создайте папку, например, "MyJavaScriptTwainScanningDemo", для HTML+JavaScript приложения.

    2. Добавьте инсталлятор VintaSoft Web TWAIN сервиса к HTML+JavaScript приложению.

      • Добавьте папку "Data" в папку "MyJavaScriptTwainScanningDemo".
      • Если веб приложение будет использоваться в веб браузере на Windows компьютере
        • Загрузите Windows инсталлятор для VintaSoft Web TWAIN сервиса (Windows версия) по ссылке: https://www.vintasoft.ru/zip/VintasoftWebTwainService-15.1.1.zip
        • Скопируйте загруженный файл VintasoftWebTwainService-15.1.1.zip в папку "MyJavaScriptTwainScanningDemo\Data\".
          Инсталятор для VintaSoft Web TWAIN сервиса (Windows версия) будет нужен, если VintaSoft Web TWAIN сервис не установлен на локальном Windows компьютере.

      • Если веб приложение будет использоваться в веб браузере на Debian/Ubuntu компьютере
        • Загрузите DEB-инсталлятор для VintaSoft Web TWAIN сервиса (Linux версия) по ссылке: https://www.vintasoft.ru/zip/VintasoftWebTwainService-15.1.1.deb
        • Скопируйте загруженный файл VintasoftWebTwainService-15.1.1.deb в папку "MyJavaScriptTwainScanningDemo\Data\".
          Инсталятор для VintaSoft Web TWAIN сервиса (Linux версия) будет нужен, если VintaSoft Web TWAIN сервис не установлен на локальном Debian/Ubuntu компьютере.

      • Если веб приложение будет использоваться в веб браузере на Fedora компьютере
        • Загрузите RPM-инсталлятор для VintaSoft Web TWAIN сервиса (Linux версия) по ссылке: https://www.vintasoft.ru/zip/VintasoftWebTwainService-15.1.1.rpm
        • Скопируйте загруженный файл VintasoftWebTwainService-15.1.1.rpm в папку "MyJavaScriptTwainScanningDemo\Data\".
          Инсталятор для VintaSoft Web TWAIN сервиса (Linux версия) будет нужен, если VintaSoft Web TWAIN сервис не установлен на локальном Fedora компьютере.

    3. Добавьте Vintasoft JavaScript файлы к HTML+JavaScript приложению.

      • Добавьте папку "Scripts" в папку "MyJavaScriptTwainScanningDemo".

      • Получите файлы Vintasoft.Shared.js, Vintasoft.Twain.js из папки "<SDK_install_path>\Bin\JavaScript\" инсталляции VintaSoft TWAIN .NET SDK или из npm-пакета 'vintasoft-web-twain-js'. Скопируйте Vintasoft JavaScript файлы в папку "Scripts".

    4. Добавьте JavaScript код, который получает изображение от TWAIN/SANE сканера и отображает отсканированное изображение, к HTML странице HTML+JavaScript приложения.

      • Создайте пустую HTML страницу "index.html" в папке "MyJavaScriptTwainScanningDemo".

      • Добавьте ссылки на файлы Vintasoft JavaScript к HTML-странице:

        Вот HTML код, который добавляет ссылки на файлы Vintasoft 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>
</body>
</html>


      • Добавьте HTML разметку (image-элемент, который будет отображать изображение, полученное от TWAIN/SANE сканера) к HTML странице:

        Вот код 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.1.1.zip" hidden>Download Windows installer of VintaSoft Web TWAIN service</a>
            <a id="VSWebTwainService_LinuxDebInstallerUrl" href="Data/VintasoftWebTwainService-15.1.1.deb" hidden>Download Linux installer (DEB-package) of VintaSoft Web TWAIN service</a>
            <a id="VSWebTwainService_LinuxRpmInstallerUrl" href="Data/VintasoftWebTwainService-15.1.1.rpm" hidden>Download Linux installer (RPM-package) of VintaSoft Web TWAIN service</a>
        </div>
    </div>
</body>
</html>


      • Добавьте JavaScript код, который получает изображение от TWAIN/SANE сканера и отображает отсканированное изображение:

        Вот JavaScript код, который получает изображение от TWAIN/SANE сканера и отображает отсканированное изображение: 
        <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.1.1.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.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 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>

    5. Загрузите HTML+JavaScript приложение на веб-сервер.

      Загрузите HTML+JavaScript приложение на веб-сервер.
      Это обязательное действие, т.к. VintaSoft Web TWAIN сервис не работает, если HTML страница открывается из файловой системы, т.е. HTML страница имеет URL "file:///somepath" и приложение используется как настольное приложение. Используйте VintaSoft TWAIN .NET SDK, если Вы хотите создать настольное приложение для TWAIN сканирования.

    6. Откройте HTML страницу HTML+JavaScript приложения и посмотрите результат.



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

     

     

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

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