OCR with Tesseract

index.html

<div id="ocr" class="ocr">
	<h1 class="h">OCR with Tesseract</h1>
	
	<form id="ocr__form" class="ocr__form">
		<label for="ocr__input">Image: </label>
		<input id="ocr__input" type="text" />
		<button type="submit">Start</button>
	</form>
	
	<img id="ocr__img" class="ocr__img" />
	
	<div id="ocr__result" class="ocr__result">
		<h3 class="h">Result:</h3>
		<div id="ocr__output" class="ocr__output">
			Waiting to start.
		</div>
	</div>
</div>

ocr-with-tesseract.markdown

OCR with Tesseract

A Pen by M Fathurrohman Mauludin on CodePen.

License.

script.js

const worker = Tesseract.create();

const defaultImage = 'https://tesseract.projectnaptha.com/img/eng_bw.png';
// const defaultImage = 'https://i.redd.it/8h66m4nnyo331.jpg';
// const defaultImage = 'https://i.imgur.com/fun6Hrl.png';


const ocr = document.querySelector('#ocr');
const input = ocr.querySelector('#ocr__input');
const img = ocr.querySelector('#ocr__img');
const output = ocr.querySelector('#ocr__output');
const form = ocr.querySelector('#ocr__form');


input.value = defaultImage;
img.src = defaultImage;


function myError(err, message) {	
	console.warn(`MyError: ${message || ''}`);
	console.error(err);
}

async function recognizeImage(image) {
	console.log('recognize START');
	worker.terminate();
	
	output.textContent = 'Waiting to start.';
	output.classList.remove('error');
	output.classList.add('processing');
	
	return worker.recognize(image)
		.progress(progress => {
			// console.log('progress', progress);
			output.innerHTML = `Processing...<br>Status: ${progress.status}<br>${Math.round(progress.progress * 100)}%`;
		}).then(result => {
			// console.log('result', result);

			output.classList.remove('processing');
			output.textContent = result.text;
		}).catch(err => {
			myError(err, 'caught error');
			output.classList.add('error');
			output.textContent = 'Error processing image.';
		}).finally(() => {
			console.log('recognize END');		
			worker.terminate();
		});
}

form.onsubmit = async e => {
	console.log('submit START');
	e.preventDefault();
	
	const imageUrl = input.value;
	img.src = imageUrl;
	
	await recognizeImage(imageUrl);
	
	console.log('submit END');
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/1.0.19/tesseract.min.js"></script>

style.scss

*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
	background: #333;
	font-family: sans-serif;
	color: #eee;
}

.h {
	margin: 0;
}

.ocr {
	padding: 20px;
	display: grid;
	gap: 20px;
	
	&__form {
		width: 100%;
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-gap: 8px;
		
		input {
			flex-grow: 1;
			padding: 2px 4px;
		}
	}
	
	&__img {
		// width: 100%;
		max-width: 100%;
		border: 2px solid #08f;
		max-height: 100vh;
		justify-self: center;
	}
	
	&__result .h {
		margin-bottom: 8px;
	}
	
	&__output {
		padding: 12px;
		background: #f8f8f8;
		color: #111;
		
		&.error {
			color: red;
		}
		
		&.processing {
			color: #08f;
		}
	}
}