teknosains · April 3, 2020 11:14
diff --git a/index.html b/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>
 /**
 - Author: Budy K
 - Desc: OCR Testing
 **/
 const languange = 'ind'; // bahasa indonesia

 /* #1 Recognize on the fly lsg saat orang upload*/
  
 async function recognize({ target: { files } }) {
  
  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) {
         let progress = 'Prosesing. Progress: ' + (m.progress * 100).toFixed(2) + '%';
         console.log(progress)
         document.getElementById('result').innerHTML = progress;
      }
    } 
  });
  console.log("---------Result------");
  console.log("Text Length:" + text.length);
  console.log(text);
  document.getElementById('result').innerHTML = JSON.stringify(resultFormater(text), null, 2); // pretty print;
 }
 const elm = document.getElementById('uploader');
 elm.addEventListener('change', recognize);
  
 
  
 /* #2 Recognize ketika sudah upload, baca Path file nya*/
  
 function recognize2(filePath) {
  Tesseract.recognize(
    filePath,
    languange,
    { 
      logger: function(m){
          //console.log(m);
          if (m.status == 'recognizing text' && m.progress !=1) {
            let progress = 'Prosesing. Progress: ' + (m.progress * 100).toFixed(2) + '%';
            console.log(progress)
            document.getElementById('result').innerHTML = progress;
          }
      } 
    }
  ).then(function({ data: { text } }) {
    console.log("---------Result------");
    console.log("Text Length:" + text.length);
    console.log(text);
    document.getElementById('result').innerHTML = JSON.stringify(resultFormater(text), null, 2); // pretty print
  })
 }  
  
 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..";
  recognize2(KTP);
  
 });
  
  
 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 {message: 'Image not recignized'};
  }  else {
    
    let result = '';
    let arrayfill = '';
    let array = [17];
    array[16] = '';
    let o = 0;
    
    for(let i = 0; i< text.length; i++){
      result += text[i]
      if(text[i+1] == '\n' && text[i+2] == '\n'){
        i += 2
        result += '\n'
      }
    }
    
    console.log(result);
    /*
    //splitting the "Gol.Darah" Part	    
    for (let i = 0; i < text.length; i++) {
      arrayfill += result[i];
      if (o == 5) {
        if (result[i + 1] + result[i + 2] == "Go") {
          array[o] = arrayfill;
          arrayfill = '';
          o += 1;
          i += 10;
        }
      } else if (result[i + 1] == '\n') {
        array[o] = arrayfill;
        arrayfill = '';
        i += 1;
        o += 1;
      }
      
      //reduce error
      if (result[i] == '=' || result[i] == '©' || result[i] == '[' || result[i] == ']' || result[i] == ':' || result[i] == '+' || result[i] == ';' || result[i] == "“" || result[i] == "|") {
        if (arrayfill.length < 7) {
            arrayfill = ' ';
        }
       }
      
     } // end for
    
    console.log(array)
    
      //if address part has 2 lines
    if (array[16].length > 5) {
      array[7] = array[7] + array[8];
      array[8] = array[9];
      array[9] = array[10];
      array[10] = array[11];
      array[11] = array[12];
      array[12] = array[13];
      array[13] = array[14];
      array[14] = array[15];
      array[15] = array[16];
    }
    //return empty if any of lines are undefined
    //if (array[15] == undefined || array[15] == '') {
    //  array.fill(' ', 0, 15);
     // text = '  ';
    //}
     console.log(array)
     */
     //assign every array
    let KTP_Object = {
      Provinsi: array[0],
      Kota: array[1],
      NIK: array[2],
      Nama: array[3],
      Tempat_Tgl_Lahir: array[4],
      Jenis_Kelamin: array[5],
      Gol_Darah: array[6],
      Alamat: array[7],
      RT_RW: array[8],
      Kel_Desa: array[9],
      Kecamatan: array[10],
      Agama: array[11],
      Status_Perkawinan: array[12],
      Pekerjaan: array[13],
      Kewarganegaraan: array[14],
      Berlaku_Hingga: array[15],
      data: text.length
    };
    
    return {
      message: 'Image rezognized',
      object: KTP_Object
    }
    
  }
 }
  
 </script>
 </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>
	/**
	- Author: Budy K
	- Desc: OCR Testing
	**/
	const languange = 'ind'; // bahasa indonesia

	/* #1 Recognize on the fly lsg saat orang upload*/

	async function recognize({ target: { files } }) {

	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) {
	let progress = 'Prosesing. Progress: ' + (m.progress * 100).toFixed(2) + '%';
	console.log(progress)
	document.getElementById('result').innerHTML = progress;
	}
	}
	});
	console.log("---------Result------");
	console.log("Text Length:" + text.length);
	console.log(text);
	document.getElementById('result').innerHTML = JSON.stringify(resultFormater(text), null, 2); // pretty print;
	}
	const elm = document.getElementById('uploader');
	elm.addEventListener('change', recognize);



	/* #2 Recognize ketika sudah upload, baca Path file nya*/

	function recognize2(filePath) {
	Tesseract.recognize(
	filePath,
	languange,
	{
	logger: function(m){
	//console.log(m);
	if (m.status == 'recognizing text' && m.progress !=1) {
	let progress = 'Prosesing. Progress: ' + (m.progress * 100).toFixed(2) + '%';
	console.log(progress)
	document.getElementById('result').innerHTML = progress;
	}
	}
	}
	).then(function({ data: { text } }) {
	console.log("---------Result------");
	console.log("Text Length:" + text.length);
	console.log(text);
	document.getElementById('result').innerHTML = JSON.stringify(resultFormater(text), null, 2); // pretty print
	})
	}

	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..";
	recognize2(KTP);

	});


	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 {message: 'Image not recignized'};
	} else {

	let result = '';
	let arrayfill = '';
	let array = [17];
	array[16] = '';
	let o = 0;

	for(let i = 0; i< text.length; i++){
	result += text[i]
	if(text[i+1] == '\n' && text[i+2] == '\n'){
	i += 2
	result += '\n'
	}
	}

	console.log(result);
	/*
	//splitting the "Gol.Darah" Part
	for (let i = 0; i < text.length; i++) {
	arrayfill += result[i];
	if (o == 5) {
	if (result[i + 1] + result[i + 2] == "Go") {
	array[o] = arrayfill;
	arrayfill = '';
	o += 1;
	i += 10;
	}
	} else if (result[i + 1] == '\n') {
	array[o] = arrayfill;
	arrayfill = '';
	i += 1;
	o += 1;
	}

	//reduce error
	if (result[i] == '=' \|\| result[i] == '©' \|\| result[i] == '[' \|\| result[i] == ']' \|\| result[i] == ':' \|\| result[i] == '+' \|\| result[i] == ';' \|\| result[i] == "“" \|\| result[i] == "\|") {
	if (arrayfill.length < 7) {
	arrayfill = ' ';
	}
	}

	} // end for

	console.log(array)

	//if address part has 2 lines
	if (array[16].length > 5) {
	array[7] = array[7] + array[8];
	array[8] = array[9];
	array[9] = array[10];
	array[10] = array[11];
	array[11] = array[12];
	array[12] = array[13];
	array[13] = array[14];
	array[14] = array[15];
	array[15] = array[16];
	}
	//return empty if any of lines are undefined
	//if (array[15] == undefined \|\| array[15] == '') {
	// array.fill(' ', 0, 15);
	// text = ' ';
	//}
	console.log(array)
	*/
	//assign every array
	let KTP_Object = {
	Provinsi: array[0],
	Kota: array[1],
	NIK: array[2],
	Nama: array[3],
	Tempat_Tgl_Lahir: array[4],
	Jenis_Kelamin: array[5],
	Gol_Darah: array[6],
	Alamat: array[7],
	RT_RW: array[8],
	Kel_Desa: array[9],
	Kecamatan: array[10],
	Agama: array[11],
	Status_Perkawinan: array[12],
	Pekerjaan: array[13],
	Kewarganegaraan: array[14],
	Berlaku_Hingga: array[15],
	data: text.length
	};

	return {
	message: 'Image rezognized',
	object: KTP_Object
	}

	}
	}

	</script>
	</html>