How to Scan Document from Scanner and Camera Using JavaScript

SDK Installation and Activation

Dynamsoft.DWT.ProductKey = 'LICENSE KEY';

The Crash Course of Building a Simple Web Document Scanning App

Document Scanning from Scanner

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

Document Scanning from Camera

<!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>
python -m http.server
ngrok http 8000

Empower Camera Document Scanning with Edge Detection and Image Post-Processing

+ template = cameraObj.Viewer.createTemplate("documentScanner");
+ cameraObj.Viewer.bind(document.getElementById('container'), template);
- cameraObj.Viewer.bind(document.getElementById('container'));
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);
});

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

Source Code

--

--

--

Manager of Dynamsoft Open Source Projects | Tech Lover

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Xiao Ling

Xiao Ling

Manager of Dynamsoft Open Source Projects | Tech Lover

More from Medium

Random Quote Generator with Backend Setup

How to do drag and drop in vanilla JS

Push notification in browser and how to use it using Javascript