Tesseract.JS OCR
<html> | |
<head> | |
<title>Tesseract</title> | |
<style> | |
body { | |
align-items: center; | |
display: flex; | |
flex-direction: row; | |
justify-content: center; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Test image --> | |
<img id="test"> | |
<!-- Tesseract --> | |
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script> | |
<!-- Application --> | |
<script> | |
class Analyze { | |
constructor() { | |
// Test cases | |
this.annotations = []; | |
// Which test | |
this.index = 0; | |
// How many passed | |
this.pass = 0; | |
// Reference to test image | |
this.image = document.querySelector( '#test' ); | |
this.image.addEventListener( 'load', ( evt ) => this.doImageLoaded( evt ) ); | |
// Load the annotations | |
// Test cases | |
this.xhr = new XMLHttpRequest(); | |
this.xhr.addEventListener( 'load', ( evt ) => this.doAnnotationsLoaded( evt ) ); | |
this.xhr.open( 'GET', 'dataset/annotations.txt', true ); | |
this.xhr.send( null ); | |
} | |
doAnnotationsLoaded( evt ) { | |
let rows = this.xhr.responseText.split( '\n' ); | |
for( let r = 0; r < rows.length; r++ ) { | |
let pair = rows[r].split( ',' ); | |
this.annotations.push( { | |
source: pair[0], | |
text: pair[1] | |
} ); | |
} | |
console.log( 'Annotations loaded.' ); | |
this.analyze(); | |
} | |
doImageLoaded( evt ) { | |
console.log( 'Image loaded.' ); | |
Tesseract.recognize( this.image ) | |
.then( ( result ) => { | |
console.log( 'Test #' + ( this.index + 1 ) ); | |
this.annotations[this.index].found = result.text.trim(); | |
this.annotations[this.index].confidence = result.confidence; | |
if( this.annotations[this.index].text.toLowerCase() == result.text.trim().toLowerCase() ) { | |
this.pass = this.pass + 1; | |
this.annotations[this.index].pass = true; | |
} else { | |
this.annotations[this.index].pass = false; | |
} | |
// if( this.index < ( this.annotations.length - 1 ) ) { | |
if( this.index < 9 ) { | |
console.log( | |
this.annotations[this.index].pass + | |
': ' + | |
this.annotations[this.index].text + | |
', ' + | |
this.annotations[this.index].found | |
); | |
this.index = this.index + 1; | |
this.analyze(); | |
} else { | |
console.log( this.pass ); | |
console.log( this.annotations ); | |
} | |
} ); | |
} | |
analyze() { | |
this.image.src = 'dataset/' + this.annotations[this.index].source; | |
} | |
} | |
let app = new Analyze(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment