Extract Text from Image with OCR - React JS

class DocumentHelper { 
  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 = "\u2022" + " [" + 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; 

var documentViewer, serviceStatus, output, exampleButton; 
// Parses error information. 
function showServiceError(jqXHR, statusText, errorThrown) { 
    alert("Error returned from service. See the console for details.") 
    var serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
    console.error(serviceError); 
} 
// Startup function 
document.addEventListener("DOMContentLoaded", function () { 
    serviceStatus = document.getElementById("serviceStatus"); 
    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."; 
    }); 
}); 

  //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[i]; 
    let newUrl = window.URL.createObjectURL(files); 
    imageViewer.imageUrl = newUrl; 
    i++; 
  }); 
 
  //Create the OCR Button 
  var ocrBtn = document.getElementById("ocrButton"); 
 
  //Create the Click Event 
  ocrBtn.onclick = (function () { 
    //Before running OCR, we check if an image has been uploaded 
    let i = 0; 
    if (!fileList.files[i]) { 
      alert("No Image Chosen To OCR. Select an Image via Choose File, before using OCR"); 
    } 
    else 
    //Run OCR on the Image 
      lt.Document.DocumentFactory.loadFromFile(fileList.files[i], new lt.Document.LoadDocumentOptions()) 
        .done((docum) => { 
          console.log("Document loaded and has cache id: " + docum.documentId); 
          //After making sure the file is loaded, Download it's document data. 
          lt.Document.DocumentFactory.downloadDocumentData(docum.documentId, null, false) 
            .done((result) => { 
              console.log("Finished downloading, mime type: " + result.mimeType + " data length: " + result.data.byteLength); 
              // Create a BLOB from this document  
              const data = result.data; 
              const blob = new Blob([new Uint8Array(data, 0, data.byteLength)]); 
              console.log({ data }); 
              //here we are passing our blob into uploadDocument to put the binary data uploaded from the image into cache 
              const uploadDocumentOptions = new lt.Document.UploadDocumentOptions(); 
              uploadDocumentOptions.documentDataLength = blob.size; 
              lt.Document.DocumentFactory.beginUploadDocument(uploadDocumentOptions) 
                .done((uploadUri) => { 
                  console.log(uploadUri, blob); 
                  lt.Document.DocumentFactory.uploadDocumentBlob(uploadUri, blob) 
                    .done(() => { 
                      console.log("finishing upload...") 
                      lt.Document.DocumentFactory.endUpload(uploadUri) 
                        .done(() => { 
                          console.log("Loading document " + uploadUri); 
                          const options = new lt.Document.LoadDocumentOptions(); 
                          options.loadMode = lt.Document.DocumentLoadMode.localThenService; 
                          lt.Document.DocumentFactory.loadFromUri(uploadUri, options) 
                            .done((doc) => { 
                              //Now the Document is uploaded in cache, and we can verify by seeing it's Cache ID 
                              console.log("Document loaded and has cache id: " + doc.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); 
                              doc.pages.item(0).getText(leadRectD) 
                                .done((CharacterData) => { 
                                  console.log(CharacterData); 
                                  DocumentHelper.log("OCR'd Text : " + CharacterData.text); 
                                  window.scrollTo(scrollOptions); 
                                  i++; 
                                }); 
                            }) 
                            .fail(DocumentHelper.showServiceError); 
                        }) 
                        .fail(DocumentHelper.showServiceError); 
                    }) 
                    .fail(DocumentHelper.showServiceError); 
                }) 
                .fail(DocumentHelper.showServiceError); 
            }) 
            .fail(DocumentHelper.showServiceError); 
        }) 
        .fail(DocumentHelper.showServiceError); 
  });