HTML JS

IMAGE TO TEXT USING OCR

(quick guide & examples)

FILE SELECTOR & RESULT <input type="file" id="sel" accept="image /png,image/gif, image/webp, image/jpeg"> <div id="res"></div>

THE HTML

01

LOAD TESSERACT https://cdnjs.com/libraries/tesseract.js <script src="https://cdnjs.cloudflare.com /ajax/libs/tesseract.js/VERSION/tesseract.min.js"></script>

GET HTML ELEMENTS let s = document.getElementById("sel"),       r = document.getElementById("res");

THE JAVASCRIPT

02

CREATE ENGLISH WORKER let w = await Tesseract.createWorker(); await worker.loadLanguage("eng"); await worker.initialize("eng");

window.onload = async () => {

ON FILE SELECT - IMAGE TO TEXT s.onchange = async () => {   let res = await w.recognize(s.files[0]);   r.innerHTML = res.data.text; };

};