logo

Jak skenovat dokument ze skeneru a fotoaparátu pomocí JavaScriptu

Dynamic Web TWAIN, jako dominantní SDK pro skenování dokumentů JavaScript, nedávno přijal WebAssembly jako novou zbraň. Od verze 17.2 Dynamic Web TWAIN nejen podporuje přístup ke skeneru napříč platformami (Windows, Linux a macOS), ale také umožňuje vývojářům využívat stolní a mobilní fotoaparáty ke skenování dokumentů pomocí JavaScriptu.

Instalace a aktivace sady SDK

Otevřete <Dynamic Web TWAIN version>/Resources/dynamsoft.webtwain.config.js pro konfiguraci licenčního klíče:

Dynamsoft.DWT.ProductKey = 'LICENSE KEY';

Zkopírujte <Dynamic Web TWAIN version>/Resources do složky statických zdrojů vašeho webového projektu.

Rychlý kurz vytváření jednoduché aplikace pro skenování webových dokumentů

Způsoby přístupu ke skeneru a fotoaparátu pomocí JavaScriptu jsou různé.

Skenování dokumentů ze skeneru

Pro skener v současné době není v prohlížečích dostupné žádné standardní JavaScript API. Řešením Dynamic Web TWAIN je spuštění lokální služby zpřístupňující skenery dokumentů a přenos naskenovaných dokumentů na webovou stránku prostřednictvím webových soketů.

Vytvoříme scanner.html soubor s několika řádky kódu HTML5 pro implementaci jednoduché aplikace pro skenování webových dokumentů:

<!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>

Můžete spustit scanner.html soubor ve webových prohlížečích v systémech Windows, macOS a Linux. Dynamic Web TWAIN je jediná sada SDK pro skenování dokumentů JavaScript, která pokrývá všechny desktopové platformy.

Skenování dokumentů z fotoaparátu

Ve srovnání se skenerem je přístup ke kameře mnohem jednodušší, protože ve standardu JavaScript je definována metoda MediaDevices.getUserMedia(). Aby se ušetřil čas vývojářů, Dynamic Web TWAIN obaluje MediaDevices.getUserMedia() a poskytuje podobné API jako skener.

Vytvořte camera.html soubor pro implementaci skenování dokumentů z fotoaparátu. Následující kód může fungovat ve webových prohlížečích pro počítače i mobilní zařízení. 

<!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>

Rozhraní JavaScript fotoaparátu API vyžaduje HTTPS . HTTP funguje pouze s localhost :

python -m http.server

Chcete-li otestovat místní webový projekt přes HTTPS, můžete použít ngrok k vytvoření zabezpečeného tunelu:

ngrok http 8000

Umožněte skenování dokumentů pomocí fotoaparátu s detekcí hran a následným zpracováním obrazu

Jak vidíme, kvalita obrazu z fotoaparátu je horší než ze skeneru. Pro zlepšení kvality obrazu poskytuje Dynamic Web TWAIN další algoritmy počítačového vidění pro detekci okrajů dokumentu a následné zpracování obrazu.

Nová metoda scanDocument() umožňuje vývojářům vytvořit aplikaci pro skenování webových dokumentů podobnou CamScanneru s několika řádky kódu JavaScript.

Vytvořme advanced.html soubor založený na camera.html .

Pomocí metody createTemplate() vytvoříme šablonu prohlížeče dokumentů a svážeme ji s container živel. 

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

Vzhledem k tomu, že na mobilních zařízeních je více kamer, získáme nejprve seznam kamer a poté zavoláme scanDocument() s vybraným fotoaparátem:

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);
    });

}

Obecně index 0 představuje přední kameru a poslední index představuje hlavní zadní kameru. Index hlavního zadního fotoaparátu se může na různých mobilních zařízeních lišit.

Zde je uživatelské rozhraní prohlížeče fotoaparátu, které obsahuje tlačítka pro výběr rozlišení fotoaparátu, přepínání předních a zadních fotoaparátů, detekci okrajů dokumentu, automatické pořizování dokumentů a úpravu více dokumentů.

Jakmile je dokument automaticky zachycen, můžeme vstoupit do režimu úprav a upravit okraj dokumentu.

Poté se na dokument aplikuje korekce perspektivy.

Můžeme také použít filtr ke zlepšení kvality obrazu.

Po zavření prohlížeče fotoaparátu můžete vybrat dokument a uložit jej na místní disk:

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

Zdrojový kód

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