React#2로 OCR 구현

마지막으로 업로드 기능을 구현했습니다.
이 튜토리얼에서는 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부 클릭의 경우

    좋은 웹페이지 즐겨찾기