Als dominierendes SDK zum Scannen von JavaScript-Dokumenten hat Dynamic Web TWAIN kürzlich WebAssembly als neue Waffe übernommen. Ab Version 17.2 unterstützt Dynamic Web TWAIN nicht nur den plattformübergreifenden (Windows, Linux und macOS) Scannerzugriff, sondern ermöglicht es Entwicklern auch, Desktop- und mobile Kameras zum Scannen von Dokumenten mit JavaScript zu verwenden.
SDK-Installation und -Aktivierung
Öffnen Sie <Dynamic Web TWAIN version>/Resources/dynamsoft.webtwain.config.js So konfigurieren Sie den Lizenzschlüssel:
Dynamsoft.DWT.ProductKey = 'LICENSE KEY';
Kopieren Sie <Dynamic Web TWAIN version>/Resources in den statischen Ressourcenordner Ihres Webprojekts.
Der Crash-Kurs zum Erstellen einer einfachen App zum Scannen von Webdokumenten
Die Zugriffsmöglichkeiten auf Scanner und Kamera per JavaScript sind unterschiedlich.
Scannen von Dokumenten vom Scanner
Für Scanner ist derzeit keine Standard-JavaScript-API in Browsern verfügbar. Die Lösung von Dynamic Web TWAIN besteht darin, einen lokalen Dienst auszuführen, der auf Dokumentenscanner zugreift, und die gescannten Dokumente über Websockets auf die Webseite zu übertragen.
Wir erstellen eine scanner.html Datei mit ein paar Zeilen HTML5-Code, um eine einfache App zum Scannen von Webdokumenten zu implementieren:
<!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>
Sie können scanner.html ausführen Datei in Webbrowsern unter Windows, macOS und Linux. Dynamic Web TWAIN ist das einzige SDK zum Scannen von JavaScript-Dokumenten, das alle Desktop-Plattformen abdeckt.
Scannen von Dokumenten von der Kamera
Im Vergleich zum Scanner ist der Zugriff auf die Kamera viel einfacher, da im JavaScript-Standard eine Methode MediaDevices.getUserMedia() definiert ist. Um Entwicklern Zeit zu sparen, umschließt Dynamic Web TWAIN den MediaDevices.getUserMedia() -Methode und bietet eine ähnliche API wie der Scanner.
Erstellen Sie einen camera.html Datei zum Implementieren des Scannens von Dokumenten von der Kamera. Der folgende Code kann sowohl auf Desktop- als auch auf mobilen Webbrowsern funktionieren.
<!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>
Die JavaScript-Kamera-API erfordert HTTPS . HTTP funktioniert nur mit localhost :
python -m http.server
Um das lokale Webprojekt über HTTPS zu testen, können Sie mit ngrok einen sicheren Tunnel erstellen:
ngrok http 8000
Erweitern Sie das Scannen von Kameradokumenten mit Kantenerkennung und Bildnachbearbeitung
Wie wir sehen können, ist die Bildqualität von der Kamera schlechter als vom Scanner. Um die Bildqualität zu verbessern, bietet Dynamic Web TWAIN zusätzliche Computer-Vision-Algorithmen für die Kantenerkennung von Dokumenten und die Bildnachbearbeitung.
Mit der neuen Methode scanDocument() können Entwickler mit wenigen Zeilen JavaScript-Code eine CamScanner-ähnliche App zum Scannen von Webdokumenten erstellen.
Lassen Sie uns eine advanced.html erstellen Datei basierend auf camera.html .
Wir verwenden die Methode createTemplate(), um eine Dokumentanzeigevorlage zu erstellen und sie an container zu binden Element.
+ template = cameraObj.Viewer.createTemplate("documentScanner");
+ cameraObj.Viewer.bind(document.getElementById('container'), template);
- cameraObj.Viewer.bind(document.getElementById('container'));
In Anbetracht der Tatsache, dass es mehrere Kameras auf Mobilgeräten gibt, rufen wir zuerst die Kameraliste ab und rufen dann scanDocument() auf mit einer ausgewählten Kamera:
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);
});
}
Im Allgemeinen steht der Index 0 für die nach vorne gerichtete Kamera und der letzte Index für die nach hinten gerichtete Hauptkamera. Der Index der Hauptkamera auf der Rückseite kann auf verschiedenen Mobilgeräten variieren.
Hier ist die Benutzeroberfläche des Kamera-Viewers, die Schaltflächen zum Auswählen der Kameraauflösung, zum Umschalten zwischen vorderer und hinterer Kamera, zur Kantenerkennung von Dokumenten, zur automatischen Erfassung von Dokumenten und zur Bearbeitung mehrerer Dokumente enthält.
Sobald ein Dokument automatisch erfasst wurde, können wir in den Bearbeitungsmodus wechseln, um den Rand des Dokuments anzupassen.
Anschließend wird das Dokument perspektivisch korrigiert.
Wir können den Filter auch verwenden, um die Bildqualität zu verbessern.
Nachdem Sie den Kamera-Viewer geschlossen haben, können Sie ein Dokument auswählen und auf der lokalen Festplatte speichern:
function downloadDocument() {
cameraObj.SaveAsJPEG("document", cameraObj.CurrentImageIndexInBuffer);
}
Quellcode
https://github.com/yushulx/javascript-document-scanning-desktop-mobile-capture