마지막으로 업로드 기능을 구현했습니다.
이 튜토리얼에서는 Tesseract.js 을 추가할 것입니다.

이 기사는 두 부분으로 나뉩니다. 이것은 2부입니다. 1부 클릭의 경우

요구 사항

Nodejs 버전 8.10 이상.

먼저 Tesseract.js 패키지를 설치합니다.

npm install tesseract.js

createWorker 함수를 가져온 후 src/App.js file .

import {createWorker} from "tesseract.js";

App() 함수 안에 작업자와 이미지 안의 텍스트를 인식하는 메서드를 추가할 것입니다.

  const worker = createWorker({
    logger: (m) => console.log(m),
});

const ExtractTextFromImage = async (imageUrl) => {
  await worker.load();
  await worker.loadLanguage("eng");
  await worker.initialize("eng");
  const {
      data: {
          text
      },
  } = await worker.recognize(imageUrl);
  setText(text);
  await worker.terminate();
};

이미지 URL 및 텍스트 표시에 대한 상태를 정의한 후. 우리는 useState와 useEffect React Hook을 사용할 것입니다. 먼저 react에서 useState를 가져와야 합니다.

 import React,{useEffect,useState} from "react";

후에

 const [ text, setText] = useState(null);

 const [imageUrl] = useState(null);

 useEffect(() => {
        if (imageUrl != null) {
            ExtractTextFromImage();
        }
    });

이제 React.Fragment 블록의 이미지에서 텍스트를 표시할 컨테이너를 추가할 것입니다.

  <div className = "container text-center pt-5" >
          {text}
  </div> 

이미지를 처리할 때 텍스트를 업데이트합니다.

const handleChangeStatus = ({
    meta
}, status) => {
    if (status === 'headers_received') {
      alert("Uploaded");
      setText("Recognizing...");
ExtractTextFromImage(meta.url);
    } else if (status === 'aborted') {
      alert("Something went wrong")
    }
}

GitHub 저장소의 경우 Here을 클릭하십시오.

이 기사는 두 부분으로 나뉩니다. 이것은 2부입니다. 1부 클릭의 경우