Skip to content

Instantly share code, notes, and snippets.

@teknosains

teknosains/index.html

Created April 4, 2020 12:00
Show Gist options
  • Save teknosains/a38cface15a1fab803d3c628ee90b029 to your computer and use it in GitHub Desktop.
Save teknosains/a38cface15a1fab803d3c628ee90b029 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/tevedaf
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h3>Upload KTP-OCR</h3>
Recognize On the Fly
<br>
<input type="file" id="uploader">
<hr>
Atau pakai yang ini
<br>
<button type="button" id="readFile">Recognize AFter Upload. Klik to read below KTP</button>
<hr>
<h4>Sample KTP</h4>
<img width="320" height="220" src="https://res.cloudinary.com/cepot/image/upload/v1585908365/KTP2_va8fdl.jpg">
<fieldset>
<legend>Extracted Text:</legend>
<div id="result"></div>
</fieldset>
</body>
<!-- v2 -->
<script src='https://unpkg.com/[email protected]/dist/tesseract.min.js'></script>
<script>
const OCRKtp = (function(window, document, undefined) {
/**
- Author: Budy K
- Desc: OCR Testing
**/
const languange = 'ind'; // bahasa indonesia
/* #1 Recognize on the fly lsg saat orang upload*/
async function recognize(files, fn) {
document.getElementById('result').innerHTML = "Starting..";
const { data: { text } } = await Tesseract.recognize(files[0], languange, {
logger: function(m) {
if (m.status == 'recognizing text' && m.progress !=1) {
fn((m.progress * 100).toFixed(2), {});
}
}
});
fn(100, resultFormater(text));
}
/* #2 Recognize ketika sudah upload, baca Path file nya*/
function recognize2(filePath, fn) {
Tesseract.recognize(
filePath,
languange,
{
logger: function(m){
if (m.status == 'recognizing text' && m.progress !=1) {
fn((m.progress * 100).toFixed(2), {});
}
}
}
).then(function({ data: { text } }) {
fn(100, resultFormater(text));
});
}
/*
* Hand Sanitizer
*/
const KTPSanitizer = {
Alpha: function(text = '') {
return text.replace(/[^A-Za-z]/g, "").trim();
},
Numeric: function(text = '') {
return text.replace(/[^0-9]/g, '');
},
AlphaNumeric: function(text = '') {
return text.replace(/[^a-zA-Z0-9 \.]/g, "").trim();
},
Name: function(text = '') {
if (text.length <= 2) return "";
return text.replace(/[^A-Za-z '-]/g, "").trim();
},
TTL: function(text = '') {
return text.replace(/[^a-zA-Z0-9_\-,]/g, "").trim();
},
RtRw: function(text = '') {
return text.replace(/[^0-9\/]/g, '').trim();
},
toDate: function(text = '') {
let rs = '';
text.split('').forEach(function(itx, idx) {
rs += itx;
if (idx == 1 || idx == 3) rs += '-';
});
return rs;
},
Kelamin: function(text = '') {
if (text.length < 3) return "";
if (text.includes('laki') || text.includes('aki')) {
return 'Laki-Laki'
}
return 'Perempuan'
}
}
function resultFormater(text) {
if (text.length < 150 || text.length > 400) {
document.getElementById('result').innerHTML = "Photo KTP Tidak bisa dibaca. Silahkan melakukan pengisian data manual ya";
return {status: false, message: 'Image not recognized'};
} else {
let result = '';
text.split('').forEach(function(letter, idx) {
result += letter;
if (letter == '\n') {
result += '\n';
}
});
let result2 = [];
result.split('\n').forEach(function(word, idx) {
let txt = word.trim().toLowerCase();
if ( txt.toLowerCase().includes('darah') ) {
let sp = txt.split('darah');
let sp1 = sp[0] || 'Jenis Kelamin :UNKNOWN'; // jenis kelamin
let sp2 = sp[1] || 'Gol. Darah :UNKNOWN'; // Gol Darah
// split jenis kelamin :
if (sp1.includes(':')) {
let jk = sp1.split(':');
let jkf = jk[1] || 'UNKNOWN';
result2.push(jkf.trim());
}
if (sp2.includes(':')) {
let gd = sp2.split(':');
let gdf = gd[1] || 'UNKNOWN';
result2.push(gdf.trim());
}
} else {
// yang ada : nya aja
if (txt !== '' && txt.includes(':')) {
let spl = txt.split(':');
let spl1 = spl[1] || 'UNKNOWN';
result2.push(spl1.trim());
}
}
});
// TTL modifier
let ttl = KTPSanitizer.TTL(result2[2]);
let tempatLahir = KTPSanitizer.Alpha(ttl);
let tglLahir = KTPSanitizer.toDate(
(KTPSanitizer.Numeric(ttl)).slice(0,8)
);
let TempatTglLahir = tempatLahir + ', ' + tglLahir;
console.log(result2);
//assign every array
let KTP_Object = {
NIK: KTPSanitizer.Numeric(result2[0]),
Nama: KTPSanitizer.Name(result2[1]),
TempatTglLahir: TempatTglLahir,
TempatLahir: tempatLahir,
TglLahir: tglLahir,
JenisKelamin: KTPSanitizer.Kelamin(KTPSanitizer.Alpha(result2[3])),
GolDarah: KTPSanitizer.Alpha(result2[4]),
Alamat: KTPSanitizer.AlphaNumeric(result2[5]),
RtRw: KTPSanitizer.RtRw(result2[6]),
Kelurahan: KTPSanitizer.Alpha(result2[7]),
Kecamatan: KTPSanitizer.Alpha(result2[8]),
Agama: KTPSanitizer.Alpha(result2[9]),
StatusPerkawinan: KTPSanitizer.Alpha(result2[10]),
Pekerjaan: KTPSanitizer.Alpha(result2[11]),
Kewarganegaraan: KTPSanitizer.Alpha(result2[12]),
BerlakuHingga: KTPSanitizer.toDate((KTPSanitizer.Numeric(result2[13])).slice(0,8))
};
console.log(KTP_Object);
return {
status: true,
message: 'Image rezognized',
object: KTP_Object
};
}
}
return {
upload: recognize,
read: recognize2
};
})(this, document); // end of OCR Helper
// OCR Read a ready file
const KTP = 'https://res.cloudinary.com/cepot/image/upload/v1585908365/KTP2_va8fdl.jpg';
document.getElementById('readFile').addEventListener('click', function(e) {
e.preventDefault();
document.getElementById('result').innerHTML = "Starting..";
OCRKtp.read(KTP, function(progress, result) {
let progressText = 'Prosesing. Progress: ' + progress + '%';
console.log(progressText)
if (progress == 100) {
document.getElementById('result').innerHTML = JSON.stringify(result);
} else {
document.getElementById('result').innerHTML = progressText;
}
});
});
// OCR KTP Upload file
document.getElementById('uploader').addEventListener('change', function(e) {
e.preventDefault();
document.getElementById('result').innerHTML = "Starting..";
OCRKtp.upload({ target: { files } }, function(progress, result) {
let progressText = 'Prosesing. Progress: ' + progress + '%';
console.log(progressText)
if (progress == 100) {
document.getElementById('result').innerHTML = JSON.stringify(result);
} else {
document.getElementById('result').innerHTML = progressText;
}
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment