Instantly share code, notes, and snippets.

Embed
What would you like to do?
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