Dynamic Web TWAIN - лучший в мире SDK для программирования сканеров, обладающий множеством интересных функций. После обновления до последней версии любое приложение для сканирования веб-документов, созданное с помощью Dynamic Web TWAIN, может быть легко совместимо с мобильными устройствами. Что произойдет, если вы вызовете API управления сканером на мобильных устройствах? Dynamic Web TWAIN может превратить ваши мобильные устройства в пульт дистанционного управления для сканеров документов, подключенных к вашему ПК. Помимо сканирования документов с удаленного сканера документов, вы также можете открыть камеру мобильного телефона для захвата документов. Создание универсального приложения для сканирования документов в HTML5 никогда не может быть таким простым.

Требования

  • Виртуальный сканер для Windows. Если у вас нет сканера документов, вы можете установить приложение виртуального сканера для тестирования в Windows.

Настройка IP и портов для сканеров документов

После установки Dynamic Web TWAIN вы можете открыть http://127.0.0.1:18625/admin/ в веб-браузере, чтобы просмотреть Dynamsoft Service Setup страницу. Вы можете соответствующим образом изменить IP-адрес для удаленного доступа.

Внедрение приложения для сканирования мобильных документов в HTML5

Давайте создадим новую папку проекта и index.htm файл. Затем скопируйте папку Resources из Dynamsoft\Dynamic Web TWAIN SDK <version>\Resources в корневой каталог проекта.

Для программирования TWAIN в динамическом Интернете необходимы два файла JavaScript. Включать их нужно последовательно:

<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>

Следующим шагом является создание экземпляра TWAIN-объекта Dynamic Web и создание средства просмотра изображений на основе элемента HTML Div. Вы можете реализовать это как автоматически, так и вручную:

// Create a Div element
var element = document.createElement('div');
var containerName = 'container';
element.id = containerName;
document.body.appendChild(element);

// Dynamsoft.WebTwainEnv.ProductKey = 'LICENSE-KEY';

// Load DWT viewer automatically
function initDWT() {
    Dynamsoft.WebTwainEnv.UseLocalService = false;
    Dynamsoft.WebTwainEnv.AutoLoad = true;
    Dynamsoft.WebTwainEnv.Containers = [{ ContainerId: containerName, Width: viewerWidth, Height: viewerHeight }];
    Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', function () {
        dwtObj = Dynamsoft.WebTwainEnv.GetWebTwain(containerName);
        if (dwtObj) {
            dwtObj.Width = viewerWidth;
            dwtObj.Height = viewerHeight;
            dwtObj.MouseShape = true;
        }
    });
}

// Load DWT viewer manually
function initDWTManually() {
    Dynamsoft.WebTwainEnv.CreateDWTObjectEx({
        WebTwainId: '1'
    },
        function (obj) {
            dwtObj = obj;
            dwtObj.Viewer.bind(element);
            dwtObj.Viewer.width = viewerWidth;
            dwtObj.Viewer.height = viewerHeight;
            dwtObj.Viewer.show();
        },
        function (err) {
            console.log(err);
        }
    );
}

Примечание: не забудьте установить лицензионный ключ. Кроме того, два метода инициализации для конечного объекта DWT ничем не отличаются, поэтому вы можете выбрать любой из них, который вам нравится.

Миниатюры помогают пользователям предварительно просматривать и выбирать изображения. Используя Dynamic Web TWAIN, вы можете реализовать средство просмотра эскизов всего с двумя строчками кода:

var thumbnailViewer = dwtObj.Viewer.createThumbnailViewer();
thumbnailViewer.show();

Поскольку программа просмотра изображений готова, пора кодировать событие сканирования документа. Вы должны были подключить к своему ПК хотя бы один сканер документов и настроить IP-адрес для службы Dynamsoft. Для включения удаленного доступа необходимо создать новый объект DWT по IP:

var dwtConfig = { WebTwainId: ip, Host: ip, UseLocalService: 'true' };
Dynamsoft.WebTwainEnv.CreateDWTObjectEx(dwtConfig, function (dwt) {
    dwtRemoteObj = dwt;
    dwtRemoteObj.RegisterEvent('OnPostTransferAsync', function (outputInfo) {
       
    }
    );
    
    // Update the remote scanner list
    dwtRemoteObj.GetSourceNamesAsync().then(function (result) {
        // Remove previous options
        for (var i = 0; i < selectSource.length; i++) {
            selectSource.remove(i);
        }

        for (var i = 0; i < result.length; i++)
            selectSource.options.add(new Option(result[i], i));
    },
        function (fail) {
            console.log(fail);
        });
},
    function (error) { console.log(error) });

Когда событие OnPostTransferAsync инициируется методом AcquireImage(), вы получите данные изображения, отсканированные с удаленного сканера документов. Данные необходимо преобразовать в большой двоичный объект, а затем загрузить в средство просмотра изображений для отображения:

dwtRemoteObj.RegisterEvent('OnPostTransferAsync', function (outputInfo) {
    dwtRemoteObj.ConvertToBlob(
        [dwtRemoteObj.ImageIDToIndex(outputInfo.imageId)],
        Dynamsoft.EnumDWT_ImageType.IT_PNG,
        function (result, indices, type) {
            dwtObj.LoadImageFromBinary(
                result,
                function () {
                    console.log('Load the image successfully');
                    dwtRemoteObj.RemoveImage(dwtRemoteObj.ImageIDToIndex(outputInfo.imageId));
                },
                function (errorCode, errorString) {
                    console.log(errorString);
                }
            );
        },
        function (errorCode, errorString) {
            console.log(errorString);
        }
    );
}
);

Вы также можете добавить следующий код для захвата документов с камеры вашего смартфона:

dwtObj.LoadImageEx('', 5,
    function () {
        console.log('success');
    },
    function (errCode, error) {
        alert(error);
    }
);

Пока что кодирование выполнено. Мы можем настроить HTTP-сервер с Python для быстрого теста:

python -m http.server

Исходный код

Https://github.com/Dynamsoft/web-document-remote-scan

Первоначально опубликовано на https://www.dynamsoft.com 1 февраля 2021 г.