var originalImg;

let  urlOfImageFile;

let selectedFile;

let myImageFile;

var img2;

var runonce=true;

​

​

function preload()

{

let fileInput = createFileInput(handleFile);

  fileInput.position(20, 20);

  //img2=loadImage("./Sample.jpg");

}

​

​

function setup() {

  createCanvas(600, 783);

}

​

function draw() {

  //background(220);

   if(img && runonce)

     {

      console.log("Process");

      // image(myImageFile, 40,40);

       runonce=false;

      //img.resize(400,600);

    //image(selectedFile.files[0], 0,0);

       // Convert the p5.js Image object to an HTML image element

   const canvas = document.createElement('canvas');

  canvas.width = img.width;

  canvas.height = img.height;

  const context = canvas.getContext('2d');

  context.drawImage(img, 0, 0);

  const imageDataUrl = canvas.toDataURL(); // Convert canvas to data URL

  const htmlImgElement = document.createElement('img');

  htmlImgElement.src = imageDataUrl;

    (async () => {

   const worker = await Tesseract.createWorker('eng');

   const ret = await worker.recognize(htmlImgElement);

   console.log(ret.data.text);

   await worker.terminate();

 })();

   }

}

​

​

function handleFile(file) {

  // Check if the file is an image

  loadImage(file.data, img);

}