tesseract.js + canvas simple demo

by AdvanTiSS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/2.1.4/tesseract.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/2.1.4/worker.min.js"></script>

<input type="file">
<textarea id="rect">
[{ "left": 700, "top": 150, "width": 700, "height": 100 }, 
{ "left": 700, "top": 250, "width": 700, "height": 100 }, { "left": 700, "top": 350, "width": 700, "height": 100 } ]
</textarea>
<button type="button" onclick="recognize();">OCR</button>
<textarea id="textarea"></textarea>
<canvas id="canvas" style="border: 4px double black;"></canvas>
<div id="progress">
</div>

CSS

#textarea {
    width: 600px;
    height: 300px;
}

#rect {
    width: 300px;
    height: 100px;
}

JavaScript

//const { createWorker } = require('tesseract.js');
//import { createWorker } from '/tesseract.min.js';

const progress = document.getElementById('progress')
const textarea = document.getElementById('textarea')
const canvas = document.getElementById("canvas")
const pdfPageNumber = 1
const pdfScale = 3
const lang = 'eng'

document.querySelector('input[type="file"]').onchange = function() {
    let img = this.files[0]
    let reader = new FileReader()
    reader.readAsDataURL(img)

    reader.onload = function() {
        //drawImage(reader.result)
        pdfToCanvas(reader.result)
    }
}

function recognize () {
      //console.log('Page rendered');
      //let src = context.getImageData(0, 0, canvas.width, canvas.height);

      /*Tesseract.recognize(src).progress((p) => {
           progress.innerHTML = p.progress
      }).then((r) => {
           textarea.value = r.text
           console.log(r.text);
      });*/
      const scheduler =  Tesseract.createScheduler();
      const worker1 = Tesseract.createWorker({
      	logger: m => console.log("worker 1\n" + JSON.stringify(m))
    	});
      const worker2 = Tesseract.createWorker({
      	logger: m => console.log("worker 2\n" + JSON.stringify(m))
    	});
      const worker3 = Tesseract.createWorker({
      	logger: m => console.log("worker 3\n" + JSON.stringify(m))
    	});

			const initWorker = async (w) => {
        await w.load();
        await w.loadLanguage('eng');
        await w.initialize('eng');
        scheduler.addWorker(w);
      }

      Tesseract.setLogging(true);
      (async () => {  
      
        await initWorker(worker1);
        await initWorker(worker2);
        await initWorker(worker2);
			})();   
      
/*       Tesseract.recognize(canvas, lang, {
              rectangle,      
        logger: data => console.log(data),
            })
               .then(({ data: {text }}) => {
               console.log(text);
               textarea.value = text;
             })...