Extract Text from Image with OCR - React JS

class DocumentHelper { 
  // Startup function 
  static connectToDocumentService = () => { 
    let serviceStatus; 
    document.addEventListener("DOMContentLoaded", function () { 
      serviceStatus = document.getElementById("serviceStatus"); 
      let output = document.getElementById("output"); 
      // To communicate with the DocumentsService, it must be running! 
      // Change these parameters to match the path to the service. 
      lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
      lt.Document.DocumentFactory.servicePath = ""; 
      lt.Document.DocumentFactory.serviceApiPath = "api"; 
      serviceStatus.innerHTML = "Connecting to service " + lt.Document.DocumentFactory.serviceUri; 
      lt.Document.DocumentFactory.verifyService() 
        .done(function (serviceData) { 
          let setStatus = function(){ 
            serviceStatus.innerHTML = ("\n" + "\u2022" + " Service connection verified!"); 
            } 
          setTimeout(setStatus, 1500); 
        }) 
        .fail(showServiceError) 
        .fail(function () { 
          serviceStatus.innerHTML = "Service not properly connected."; 
        }); 
    }); 
  } 
 
  static showServiceError = (jqXHR, statusText, errorThrown) => { 
    alert("Error returned from service. See the console for details."); 
    const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
    console.error(serviceError); 
  } 
  static log = (message, data) => { 
    const outputElement = document.getElementById("output"); 
    if (outputElement) { 
      const time = (new Date()).toLocaleTimeString(); 
      const textElement = document.createElement("p"); 
      textElement.innerHTML = "\u2023" + " [" + time + "]: " + message; 
      textElement.style = "text-align: left;"; 
      outputElement.appendChild(textElement, outputElement.firstChild); 
    } 
    if (!data) 
      console.log(message); 
    else 
      console.log(message, data); 
  } 
} 

import React from 'react'; 
import './App.css'; 
 
function App() { 
  return ( 
    <div className="App"> 
      <header className="App-header"> 
 
        <p id="serviceStatus"></p> 
 
        <h3>React OCR Example </h3> 
 
        <div id="btnMenu"> 
 
        <input type="file" id="file-input" accept=".jpg,.jpeg,.png"></input> 
 
        <button id="addToViewer">Add Image To Viewer</button> 
 
        <button id="ocrButton">Ocr</button> 
 
        </div> 
 
        <div id="imageViewerDiv"></div> 
 
        <h6 id="output"></h6> 
 
      </header> 
    </div> 
  ); 
} 
export default App; 

//Create an Image Viewer 
let imageViewerDiv = document.getElementById("imageViewerDiv"); 
const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, 1, imageViewer.defaultZoomOrigin); 
this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
this.imageViewer.autoCreateCanvas = true; 
this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
//Create variables Grabbing the HTML elements 
let fileList = document.getElementById("file-input"); 
let btn = document.getElementById("addToViewer"); 
 
btn.onclick = (function () { 
  //create our iterator 
  // let i = 0; 
  //initially set our target to the first child of the uploaded files, then iterate it so 
  //subsequent images can be loaded in. 
  let files = fileList.files[0]; 
  let newUrl = window.URL.createObjectURL(files); 
  imageViewer.imageUrl = newUrl; 
  // i++; 
}); 
 
//Create the Barcode Button 
let ocrBtn = document.getElementById("ocrButton"); 
 
//Create the Click Event 
  ocrBtn.onclick = async function () { 
    //Before running Barcode Recognition, we check if an image has been uploaded  
    // let i = 0;  
    if (!fileList.files[0]) { 
      alert("No Image Chosen for Barcode Recognition. Select an Image via Choose File, before getting the Barcode"); 
    } 
    else { 
      try { 
        let leadDoc = await lt.Document.DocumentFactory.loadFromFile(fileList.files[0], new lt.Document.LoadDocumentOptions()) 
        console.log("Document loaded and has cache id: " + leadDoc.documentId); 
        let leadRectD = lt.LeadRectD.empty; 
        DocumentHelper.log("OCR Starting..."); 
        //Since running OCR on an image, and having the text appended to the page elongates the document, we scroll to the output.   
        let myelem = document.getElementById("output") 
        let scrollOptions = { 
          left: myelem.offsetParent.offsetWidth, 
          top: myelem.offsetParent.offsetHeight, 
          behavior: 'smooth' 
        } 
        window.scrollTo(scrollOptions); 
        leadDoc.pages.item(0).getText(leadRectD) 
 
        let CharacterData = await leadDoc.pages.item(0).getText(leadRectD); 
        console.log(CharacterData); 
        DocumentHelper.log("OCR'd Text : " + CharacterData.text); 
        window.scrollTo(scrollOptions); 
        // i++; 
      } catch (error){ 
        console.error(error); 
      } 
    } 
  };