Как доминирующий SDK для сканирования документов JavaScript, Dynamic Web TWAIN недавно принял WebAssembly в качестве нового оружия. Начиная с версии 17.2, Dynamic Web TWAIN не только поддерживает межплатформенный (Windows, Linux и macOS) доступ к сканеру, но также позволяет разработчикам использовать настольные и мобильные камеры для сканирования документов с помощью JavaScript.

Установка и активация SDK

Откройте <Dynamic Web TWAIN version>/Resources/dynamsoft.webtwain.config.js для настройки лицензионного ключа:

Dynamsoft.DWT.ProductKey = 'LICENSE KEY';

Скопируйте <Dynamic Web TWAIN version>/Resources в папку статических ресурсов вашего веб-проекта.

Ускоренный курс создания простого приложения для сканирования веб-документов

Способы доступа к сканеру и камере с помощью JavaScript различны.

Сканирование документов со сканера

Для сканера в настоящее время в браузерах нет стандартного JavaScript API. Решение Dynamic Web TWAIN заключается в запуске локальной службы доступа к сканерам документов и передаче отсканированных документов на веб-страницу через веб-сокеты.

Мы создаем файл scanner.html с несколькими строками кода HTML5 для реализации простого приложения для сканирования веб-документов:

<!DOCTYPE html>
<html>

<head>
    <title>Scan Document from Scanner</title>
    <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
    <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
</head>

<body>
    <input type="button" value="scan" onclick="acquireScanner();" />

    <div id="container"></div>

    <script type="text/javascript">
        var scannerObj;
        Dynamsoft.DWT.CreateDWTObjectEx({
            WebTwainId: 'scanner',
            UseLocalService: true,
        }, function (obj) {
            scannerObj = obj;
            scannerObj.Viewer.bind(document.getElementById('container'));
            scannerObj.Viewer.width = 480;
            scannerObj.Viewer.height = 640;
            scannerObj.Viewer.show();
        }, function (ec, es) {
            console.log(es);
        });

        function acquireScanner() {
            if (scannerObj) {
                scannerObj.SelectSource();
                scannerObj.OpenSource();
                scannerObj.IfDisableSourceAfterAcquire = true;
                scannerObj.AcquireImage(() => {
                    scannerObj.CloseSource();
                }, () => {
                    scannerObj.CloseSource();
                });
            }
        }
    </script>
</body>
</html>

Вы можете запустить файл scanner.html в веб-браузерах в Windows, macOS и Linux. Dynamic Web TWAIN — это единственный SDK для сканирования документов JavaScript, который поддерживает все настольные платформы.

Сканирование документов с камеры

По сравнению со сканером доступ к камере намного проще, потому что в стандарте JavaScript определен метод MediaDevices.getUserMedia(). Чтобы сэкономить время разработчиков, Dynamic Web TWAIN оборачивает метод MediaDevices.getUserMedia() и предоставляет такой же API, что и сканер.

Создайте файл camera.html для реализации сканирования документов с камеры. Следующий код может работать как в настольных, так и в мобильных веб-браузерах.

<!DOCTYPE html>
<html>

<head>
    <title>Scan Document from Camera</title>
    <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
    <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
    <script type="text/javascript" src="Resources/addon/dynamsoft.webtwain.addon.camera.js"></script>
</head>

<body>
    <input type="button" value="scan" onclick="acquireCamera();" />

    <div id="container"></div>
    <img id="img" src="" />

    <script type="text/javascript">
        var cameraObj;
        Dynamsoft.DWT.CreateDWTObjectEx({
            WebTwainId: 'camera',
            UseLocalService: false,
        }, function (obj) {
            cameraObj = obj;
            cameraObj.Viewer.bind(document.getElementById('container'));
            cameraObj.Viewer.width = 480;
            cameraObj.Viewer.height = 640;
            cameraObj.Viewer.show();
            cameraObj.Addon.Camera.play();
        }, function (ec, es) {
            console.log(es);
        });

        function acquireCamera() {
            if (cameraObj) {
                cameraObj.Addon.Camera.capture().then(function (result) {
                    console.log(result);
                    var objectURL = URL.createObjectURL(result);
                    document.getElementById('img').src = objectURL;
                });
            }
        }
    </script>
</body>
</html>

API камеры JavaScript требует HTTPS. HTTP работает только с localhost:

python -m http.server

Чтобы протестировать локальный веб-проект через HTTPS, вы можете использовать ngrok для создания безопасного туннеля:

ngrok http 8000

Расширьте возможности сканирования документов с помощью камеры с обнаружением краев и постобработкой изображений

Как мы видим, качество изображения с камеры хуже, чем со сканера. Для улучшения качества изображения Dynamic Web TWAIN предоставляет дополнительные алгоритмы компьютерного зрения для обнаружения границ документа и постобработки изображения.

Новый метод scanDocument() позволяет разработчикам создавать приложение для сканирования веб-документов, похожее на CamScanner, с помощью нескольких строк кода JavaScript.

Давайте создадим файл advanced.html на основе camera.html.

Мы используем метод createTemplate(), чтобы создать шаблон просмотра документов и привязать его к элементу container.

+ template = cameraObj.Viewer.createTemplate("documentScanner");
+ cameraObj.Viewer.bind(document.getElementById('container'), template);
- cameraObj.Viewer.bind(document.getElementById('container'));

Учитывая, что на мобильных устройствах есть несколько камер, мы сначала получаем список камер, а затем вызываем scanDocument() с выбранной камерой:

Dynamsoft.DWT.CreateDWTObjectEx({
    WebTwainId: 'camera',
    UseLocalService: false
}, function (obj) {
    cameraObj = obj;
    template = cameraObj.Viewer.createTemplate("documentScanner");
    cameraObj.Viewer.bind(document.getElementById('container'), template);
    cameraObj.Viewer.width = 720;
    cameraObj.Viewer.height = 720;
    cameraObj.Viewer.show();
    updateCameraList();
}, function (ec, es) {
    console.log(es);
});

async function createCameraScanner(deviceId) {
    await cameraObj.Addon.Camera.closeVideo();
    cameraObj.Addon.Camera.scanDocument({
        scannerViewer: {
            deviceId: deviceId,
            fullScreen: true
        }

    }).then(
        function () { console.log("OK"); },
        function (error) { console.log(error.message); });
}

function updateCameraList() {
    if (!cameraObj) return;
    var source = document.getElementById('CameraSource');
    source.options.length = 0;
    cameraObj.Addon.Camera.getSourceList().then((list) => {
        for (var i = 0; i < list.length; i++) {
            var option = document.createElement('option');
            option.text = list[i].deviceId || list[i].label
            source.options.add(option);
        }
        createCameraScanner(source.options[source.options.length - 1].text);
    });

}

Как правило, индекс 0 представляет собой фронтальную камеру, а последний индекс представляет собой основную камеру, обращенную назад. Индекс основной задней камеры может различаться на разных мобильных устройствах.

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

После автоматического захвата документа мы можем войти в режим редактирования, чтобы настроить края документа.

После этого к документу применяется коррекция перспективы.

Мы также можем использовать фильтр для улучшения качества изображения.

После закрытия средства просмотра камеры вы можете выбрать документ и сохранить его на локальный диск:

function downloadDocument() {
    cameraObj.SaveAsJPEG("document", cameraObj.CurrentImageIndexInBuffer);
}

Исходный код

https://github.com/yushulx/javascript-document-scanning-desktop-mobile-capture

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