This application can scan any document via scanner from web browser. Simply it's a web application twain integration. It provides solutions for
Process of installation is so straight-forward just have to follow the steps bellow:
<button type="button" onclick="scanImage();" class="btn btn-primary btn-lg">Scan</button>
<div id="selectedFiles" class="row" style="padding: 3px"></div>
<div class="modal fade scandetail" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div style="max-height:1200px;overflow:scroll;">
<canvas id="myCanvas"></canvas>
</div>
</div>
</div>
</div>
<div class="modal fade dalert" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
Connection Failed
</div>
<div class="modal-body">
No Scan app application found in your machine please download,install and open first then refresh the browser.
<a href="https://github.com/mgriit/ScanAppForWeb/blob/master/~/SrcFile/Scan_App_SetUp.msi" download>Download Files</a>
</div>
</div>
</div>
</div>
Javascript Files bellow are needed with Jquery and Boothstrap.
var selDiv = "";
var storedFiles = [];
$(document).ready(function () {
selDiv = $("#selectedFiles");
$("body").on("click", ".selFile", editFiles);
});
var start = function () {
var i = 0;
var wsImpl = window.WebSocket || window.MozWebSocket;
window.ws = new wsImpl('ws://localhost:8181/');
ws.onmessage = function (e) {
if (typeof e.data === "string") {
//IF Received Data is String
}
else if (e.data instanceof ArrayBuffer) {
//IF Received Data is ArrayBuffer
}
else if (e.data instanceof Blob) {
i++;
var f = e.data;
f.name = "File" + i;
storedFiles.push(f);
var reader = new FileReader();
reader.onload = function (e) {
var html = "<div class=\"col-sm-2 text-center\" style=\"border: 1px solid black; margin-left: 2px;\"><img height=\"200px\" width=\"200px\" src=\"" + e.target.result + "\" data-file='" + f.name + "' class='selFile' title='Click to remove'><br/>" + i + "</div>";
selDiv.append(html);
}
reader.readAsDataURL(f);
}
};
ws.onopen = function () {
//Do whatever u want when connected succesfully
};
ws.onclose = function () {
$('.dalert').modal('show');
};
}
window.onload = start;
function scanImage() {
ws.send("1100");
};
function editFiles(e) {
var file = $(this).data("file");
for (var i = 0; i < storedFiles.length; i++) {
if (storedFiles[i].name === file) {
$('.scandetail').modal('show');
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = window.URL.createObjectURL(storedFiles[i]);
img.onload = function () {
c.width = img.width ;
c.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
}
break;
}
}
};
I have made a desktop apllication(Windows Form) that will work in background. Desktop application will remain connected with browser while it is open. When browser command to scan the desktop apllication scan document and send it to browser.