Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Driver License Scan demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="JavaScript/IdErrorDescription.js" type="text/javascript"></script>
<script src="JavaScript/ScannerErrorDescription.js" type="text/javascript"></script>
<script type="text/JavaScript" src="JavaScript/SDKLicenseKey.js"></script>
<script type="text/javascript">
var SDKLicenseKey = GetSDKLicenseKey();
window.onbeforeunload = winUnload;
var myinterval;
var directoryPath = "C:\\CSSNDemoImages\\"; //set path to root folder for web app. to hold all images generated by this app.
var filePathFront = directoryPath + "scannedImage.jpg"; //name of front scanned image
var filePathBack = directoryPath + "scannedImage-back.jpg"; //name of back scanned image
function winUnload() {
UnInitLibrary();
}
function getCSSNLibJObj() {
if (document.getElementById) {
return document.getElementById("CSSNLibJ");
}
else {
return null;
}
}
function InitLibrary() {
var CSSNLibJ = getCSSNLibJObj();
var result = CSSNLibJ.InitScanLib(SDKLicenseKey);
if (result < 1 && result != -13) {
ScannerErrors(result);
}
else {
scannerName = CSSNLibJ.GetScannerName();
document.getElementById("ConnectionStatus").innerHTML = "<b>Scanner Status: Connected - " + scannerName + "</b>";
result = CSSNLibJ.InitIdLib(SDKLicenseKey);
if (result < 1 && result != -13) {
alert("Error init Id Lib - " + result)
}
document.getElementById("btnScanFront").disabled = false;
document.getElementById("btnScanBack").disabled = false;
document.getElementById("btnCalibrate").disabled = false;
document.getElementById("cbSaveImageToDisk").disabled = false;
document.getElementById("cbAutoDetectState").checked = true;
document.getElementById("cbAutoDetectState").disabled = false;
BuildRegions();
}
}
function UnInitLibrary() {
var CSSNLibJ = getCSSNLibJObj();
CSSNLibJ.UnInitSDK();
}
function Calibrate() {
var CSSNLibJ = getCSSNLibJObj();
CSSNLibJ.CalibrateEx();
}
function ClearData() {
CSSNLibJ.ResetIDFields();
document.getElementById("text").innerHTML = "";
document.getElementById('scanImage').innerHTML = "<img src=images/cardDemo.jpg></img>"
document.getElementById('scanBackImage').innerHTML = "<img src=images/cardDemo.jpg></img>"
document.getElementById('sigImage').innerHTML = "<img src=images/signatureDemo.jpg></img>"
document.getElementById('faceImage').innerHTML = "<img src=images/faceDemo.jpg></img>"
}
function ScanFront() {
ScanCard(filePathFront, "front");
}
function ScanBack() {
ScanCard(filePathBack, "back");
}
function ScanCard(filePath, cardSide) {
var CSSNLibJ = getCSSNLibJObj();
if (CSSNLibJ.IsScannerValid() == 1) {
if (CSSNLibJ.IsNeedCalibration() == 1) {
CSSNLibJ.CalibrateEx();
}
document.getElementById("text").innerHTML = ""; //clear text area
CSSNLibJ.SetScanSize(-1, -1);
CSSNLibJ.SetResolution(300);
if (cardSide == "front")
result = CSSNLibJ.ScanToFileJ(""); //scan file to buffer & disk
else
result = CSSNLibJ.ScanToFileBackJ(""); //scan file to buffer & disk
if (result < 0)//if error
{
ScannerErrors(result); //call scan lib error handler
}
if (cardSide == "front") {
document.getElementById('scanImage').innerHTML = "<img src= \"data:image/jpg;base64," + CSSNLibJ.GetImageBufferDataBase64("jpg") + "\"></img>";
}
else {
document.getElementById('scanBackImage').innerHTML = "<img src= \"data:image/jpg;base64," + CSSNLibJ.GetImageBufferBackDataBase64("jpg") + "\" id=backimage></img>";
}
document.getElementById("btnProcessCard").disabled = false;
document.getElementById("btnRotate").disabled = false;
document.getElementById("btnRotateBack").disabled = false;
document.getElementById("btnClearData").disabled = false;
}
else {
alert("Scanner not valid, please check connection to the scanner.")
}
}
function ProcessCard() {
var CSSNLibJ = getCSSNLibJObj();
var stateid = -1;
var reg = document.getElementById('region');
var regio= "United States";
CSSNLibJ.SetIDRegion(GetRegionIntValue(regio));
// Auto detect crops and rotates the internal image for better OCR results
stateid = CSSNLibJ.DetectState("");
if (stateid < 0)
IdLibErrors(stateid);
// var result = CSSNLibJ.ProcessState("",stateid);
var result = CSSNLibJ.DetectProcessDuplex("", "", stateid, 0);
if (result >= 0) {
var BCData;
//refresh barcode to fill library properties
CSSNLibJ.RefreshBC();
//extract barcode (back side) data
BCData = "BarCode Data : <br /> " +
"Name - " + CSSNLibJ.getBCName() + "<br />" +
"Name First - " + CSSNLibJ.getBCFirstName() + "<br />" +
"Name Middle - " + CSSNLibJ.getBCMidName() + "<br />" +
"Name Last - " + CSSNLibJ.getBCLastName() + "<br />" +
"License - " + CSSNLibJ.getBCLicense() + "<br />" +
"DOB - " + CSSNLibJ.getBCDateOfBirth() + "<br />" +
"Address - " + CSSNLibJ.getBCAddress() + "<br />" +
"City - " + CSSNLibJ.getBCCity() + "<br />" +
"State - " + CSSNLibJ.getBCState() + "<br />" +
"Zip - " + CSSNLibJ.getBCZip();
document.getElementById("text").innerHTML = BCData;
document.getElementById('faceImage').innerHTML = "<img src= \"data:image/jpg;base64," + CSSNLibJ.GetIDFaceImgBufferBase64("", "jpg", stateid) + "\"/>"
document.getElementById('sigImage').innerHTML = "<img src= \"data:image/jpg;base64," + CSSNLibJ.GetIDSignatureImgBufferBase64("", "jpg", stateid) + "\"/>"
document.getElementById('scanImage').innerHTML = "<img src= \"data:image/jpg;base64," + CSSNLibJ.GetImageBufferDataBase64("jpg") + "\"/>"
document.getElementById('scanBackImage').innerHTML = "<img src= \"data:image/jpg;base64," + CSSNLibJ.GetImageBufferBackDataBase64("jpg") + "\" id=backimage></img>";
}
else {
if (result < 0) {
IdLibErrors(result);
}
}
}
function DumpImage() {
var CSSNLibJ = getCSSNLibJObj();
var angle = CSSNLibJ.GetIDImageAngle();
var tempImageName = "C:\\CSSNDemoImages\\" + guid() + ".jpg";
var i = CSSNLibJ.ReformatImage("", 0, 0, tempImageName);
if (i < 0) {
alert("Error in rotation");
}
document.getElementById('image').src = tempImageName;
tempImageName = "C:\\CSSNDemoImages\\" + guid() + ".jpg";
CSSNLibJ.SetMainImage(2);
i = CSSNLibJ.ReformatImage("", 0, 0, tempImageName);
CSSNLibJ.SetMainImage(0);
if (i < 0) {
alert("Error in rotation");
}
document.getElementById('scanBackImage').innerHTML = "<img id=backimage src=" + tempImageName + "></img>";
}
function RotateBack() {
var tempImageName;
var result;
result = CSSNLibJ.RotateImage("", 1, 0, "");
if (result < 0) {
alert("Error in rotation");
}
// document.getElementById('scanImage').innerHTML = "<img src= \"data:image/jpg;base64," + CSSNLibJ.GetImageBufferDataBase64("jpg") + "\"></img>";
CSSNLibJ.SetMainImage(2);
result = CSSNLibJ.RotateImage("", 1, 0, "");
if (result < 0) {
alert("Error in rotation");
}
CSSNLibJ.SetMainImage(0);
document.getElementById('scanBackImage').innerHTML = "<img src= \"data:image/jpg;base64," + CSSNLibJ.GetImageBufferBackDataBase64("jpg") + "\" id=backimage></img>";
}
function RotateImage() {
var tempImageName;
var result;
result = CSSNLibJ.RotateImage("", 1, 0, "");
if (result < 0) {
alert("Error in rotation");
}
document.getElementById('scanImage').innerHTML = "<img src= \"data:image/jpg;base64," + CSSNLibJ.GetImageBufferDataBase64("jpg") + "\"></img>";
CSSNLibJ.SetMainImage(2);
result = CSSNLibJ.RotateImage("", 1, 0, "");
if (result < 0) {
alert("Error in rotation");
}
CSSNLibJ.SetMainImage(0);
//document.getElementById('scanBackImage').innerHTML = "<img src= \"data:image/jpg;base64," + CSSNLibJ.GetImageBufferBackDataBase64("jpg") + "\" id=backimage></img>";
}
function AutoDetectState() {
if (document.getElementById("cbAutoDetectState").checked == true) {
document.getElementById("country").style.visibility = "hidden";
document.getElementById("state").style.visibility = "hidden";
document.getElementById("lbCountry").style.visibility = "hidden";
document.getElementById("lbState").style.visibility = "hidden";
}
else {
document.getElementById("country").style.visibility = "visible";
document.getElementById("state").style.visibility = "visible";
document.getElementById("lbCountry").style.visibility = "visible";
document.getElementById("lbState").style.visibility = "visible";
}
}
function BuildRegions() {
var CSSNLibJ = getCSSNLibJObj();
var regionID;
var regionName;
document.getElementById('region').options.length = 0;
//Getting the first region
regionID = CSSNLibJ.GetFirstIDRegion();
// document.getElementById("FileLocation").innerHTML = CSSNLibJ.GetRegionNameById(regionID);
//Building the region list
while (regionID != ID_ERR_NO_NEXT_COUNTRY) {
//Getting region name by passing in regionID and checking the response
if (CSSNLibJ.GetRegionNameById(regionID) != ID_ERR_NO_MATCH) {
regionName = CSSNLibJ.GetRegionNameById(regionID);
//Adding region to combo boxes
var x = document.getElementById('region');
var option = document.createElement("option");
option.text = regionName;
try {
// for IE earlier than version 8
x.add(option, x.options[null]);
}
catch (e) {
x.add(option, null);
}
}
//Getting next region
regionID = CSSNLibJ.GetNextIDRegion();
}
document.getElementById('region').options[0].selected = "selected";
//Get country list for the selected region
BuildCountries();
}
function BuildCountries() {
var countryID, regionID;
var countryName;
document.getElementById('country').options.length = 0;
var reg = document.getElementById('region');
//Getting regionID to get countries in that Region
regionID = CSSNLibJ.GetRegionIDByName(reg.options[reg.selectedIndex].text);
// document.getElementById('FileLocation').innerHTML = document.getElementById('FileLocation').innerHTML + reg.selectedIndex;
//Getting first CountryID in that region
countryID = CSSNLibJ.GetFirstCountryInRegion(regionID);
//Getting all the countries in that Region
while (countryID != ID_ERR_NO_NEXT_COUNTRY) {
//Getting Country name by passing CountryID
if (CSSNLibJ.GetCntryNameById(countryID) != ID_ERR_NO_MATCH) {
countryName = CSSNLibJ.GetCntryNameById(countryID);
//Adding Country Name to the combo box
var x = document.getElementById('country');
var option = document.createElement("option");
option.text = countryName;
option.value = countryID;
try {
// for IE earlier than version 8
x.add(option, x.options[null]);
}
catch (e) {
x.add(option, null);
}
}
//Getting next CountryID in that Region
countryID = CSSNLibJ.GetNextCountryInRegion(regionID);
}
//Selecting first Country in the list to get states
document.getElementById('country').options[0].selected = "selected";
//Get States for selected Country
BuildStates();
}
function BuildStates() {
var countryID = -5, stateID;
var stateName;
document.getElementById('state').options.length = 0;
var cnty = document.getElementById('country');
//Getting countryID to get states
countryID = cnty.options[cnty.selectedIndex].value;
//Checking validity of countryID
if (countryID != ID_ERR_NO_MATCH) {
//Getting first state
stateID = CSSNLibJ.GetFirstStateByCntry(countryID);
while (stateID != ID_ERR_NO_NEXT_STATE) {
if (CSSNLibJ.GetStateNameById(stateID) != ID_ERR_NO_MATCH) {
stateName = CSSNLibJ.GetStateNameById(stateID);
var x = document.getElementById('state');
var option = document.createElement("option");
option.text = stateName;
option.value = stateID;
try {
// for IE earlier than version 8
x.add(option, x.options[null]);
}
catch (e) {
x.add(option, null);
}
}
stateID = CSSNLibJ.GetNextStateByCntry(countryID);
}
//Selecting first State in the list for display
document.getElementById('state').options[0].selected = "selected";
}
}
function RegionChanged() {
BuildCountries();
}
function CountryChanged() {
BuildStates();
}
function GetRegionIntValue(reg) {
switch (reg) {
case "United States":
return 0;
case "Australia":
return 4;
case "Asia":
return 5;
case "Canada":
return 1;
case "America":
return 2;
case "Europe":
return 3;
case "Africa":
return 7;
case "General doc.":
return 6;
default:
return -1;
}
}
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
function guid() {
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}
</script>
<style type="text/css">
input.btn
{
width: 150px;
height: 30px;
}
input.btnbig
{
width: 150px;
height: 50px;
}
div.bigImg {
float: left;
width: 358px;
height: 210px;
padding: 15px 0 0 20px;
margin: 0px 0 0 0px;
}
div.bigImg img {
width: 340px;
height: 204px;
}
div.FaceImg {
float: left;
width: 140px;
height: 170px;
}
div.FaceImg img {
width: 140px;
height: 170px;
}
div.SigImg {
width: 160px;
height: 50px;
}
div.SigImg img {
width: 160px;
height: 50px;
}
table.mytable {
padding-left:50px;
}
div.StateSelection {
float:left;
padding-left:50px;
width:250px;
}
div.ScanExtract {
float:left;
padding-left:20px;
width:394px;
}
label.labels{
display: block;
width: 50px;
float:left;
}
select.dropdown
{
width:150px; visibility:hidden;
}
.style1
{
height: 22px;
}
</style>
</head>
<body background="images/back_all2.gif">
<applet name="CSSNLibJ" id="CSSNLibJ" archive="./JARFiles/xFunction.jar, ./JARFiles/CSSNLibJ.jar" code="lib.CSSNLibJ"
width="0" height="0">
</applet>
<div id="main">
<div style="width:1200px">
<h2 style="color: #000080">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Driver License Scanning</h2>
</div>
<div id="ScanAndExtract" class="ScanExtract">
<label id="ConnectionStatus" style="color: #0000FF"></label><br />
<input id="btnConnect" type="button" class="btn" onclick="InitLibrary();" value="Connect to Scanner"/>
&nbsp;
<input id="btnClearData" type="button" class="btn" disabled="true" onclick="ClearData();" value="Clear Data" />
<br />
<div id="Div1">
<table border="0" class="mytable">
<tr> <td colspan="2">
<br />
</td> </tr> <tr> <td style="padding-bottom:20px">
<div id="faceImage" class="FaceImg"> <img src="images/faceDemo.jpg" /> </div>
</td> <td style="padding-bottom:20px; padding-left:20px;">
<input id="btnProcessCard" type="button" class="btnbig" disabled="true" value="Process ID" onclick="ProcessCard();" /><br />
<br />
<br />
<br />
<div id="sigImage" class="SigImg"> <img src="images/signatureDemo.jpg" />
</div>
</td> </tr> <tr> <td colspan="2">
<div id="text"></div>
</td> </tr>
</table>
</div>
</div>
<div >
<table border="0" class="mytable1">
<tr>
<td class="style1"></td>
<td class="style1"></td>
</tr>
<tr> <td>
&nbsp;&nbsp; &nbsp;<input id="btnScanFront" type="button" class="btn" disabled="true" value="Scan Front" onclick="ScanFront();" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input id="btnRotate" type="button" class="btn" disabled="true" value="Rotate Image" onclick="RotateImage();" /></td>
<td>
&nbsp;</td>
<td rowspan="10" style="width: 100px; height: 100px" valign="top">
<img alt="" src="images/century1.png" width="350" height="350"
/></tr>
<tr> <td colspan="2">
<div id="scanImage" class="bigImg"> <img id="image" src="images/cardDemo.jpg" /> </div>
</td>
</tr>
<tr>
<td>
&nbsp;&nbsp; &nbsp; <input id="btnScanBack" type="button" class="btn" disabled="true" value="Scan Back" onclick="ScanBack();" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input id="btnRotateBack" type="button" class="btn" disabled="true"
value="Rotate Image" onclick="RotateBack();" /></td>
<td>
</td>
</tr>
<tr>
<td>
<div id="scanBackImage" class="bigImg"> <img id="backimage" src="images/cardDemo.jpg" /> </div>
</td>
<td>
</td>
</tr>
</table>
</div>
<div id="logo">
</td>
&nbsp;</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment