OCR이란 무엇입니까?

Wikipedia에 따르면 광학 문자 인식 또는 광학 문자 판독기는 스캔한 문서, 문서의 사진, 장면 사진 또는 이미지에 겹쳐진 자막 텍스트. 전체 기사Here를 읽을 수 있습니다.

오늘 우리는 React 및 Tesseract.js을 사용하여 광학 문자 인식을 구현하려고 합니다.

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

요구 사항

Nodejs 버전 8.10 이상.

설치

create-react-app을 사용하여 새로운 반응 프로젝트를 생성할 것입니다.

npx create-react-app react-ocr
cd react-ocr
npm start

사용자 인터페이스의 경우 Bootstrap을 사용하고 업로드를 추가하려면 React Dropzone Uploader을 사용할 것입니다.

npm install --save bootstrap react-dropzone-uploader

가져오기 스타일을 src/index.js 파일에 추가합니다.

import 'bootstrap/dist/css/bootstrap.css';
import 'react-dropzone-uploader/dist/styles.css';

이제 src/App.js에서 상단의 Dropzone 구성 요소를 가져옵니다.

import Dropzone from 'react-dropzone-uploader';

기본 사용자 인터페이스를 갖도록 App 클래스를 다음과 같이 교체합니다.

function App ()  {
  render() {
    return (
     <React.Fragment>

      <nav className = "navbar navbar-light bg-light justify-content-center mt-3">
            <a className = "navbar-brand" href = "/" > React OCR </a><br/>
            <p> Optical Character Recognition with React and Tesseract.js </p> 
        </nav>
        <Dropzone 
        accept = "image/jpeg, image/png, image/jpg"
        inputContent = {
            (files,extra) => (extra.reject ? 'Only PNG and JPG Image files are allowed' : 'Drop  image here')
        }
        styles = {
            {
                dropzoneActive: {
                    borderColor: 'green'
                },
                dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },
                    inputLabel: (files, extra) => (extra.reject ? { color: 'red' } : {}),
            }
        }
        />
</React.Fragment>
    )
  }
};

이렇게 생겼습니다.


이제 getUploadParams, onChangeStatus, maxFiles, multiple, canCancel 속성을 사용하여 추가하여 이전에 설치한 react-dropzone-uploader 패키지를 사용하여 업로드 기능을 통합할 것입니다.
보관용으로 HttpBin을 사용할 예정입니다.

추가한 후 함수는 다음과 같습니다.

import React from 'react';
import './App.css';
import Dropzone from 'react-dropzone-uploader';


function App () {

 const getUploadParams = () => {
    return {
        url: 'https://httpbin.org/post'
    }
}

 const handleChangeStatus = ({
    meta
}, status) => {
    if (status === 'headers_received') {
      alert("Uploaded")
    } else if (status === 'aborted') {
      alert("Something went wrong")
    }
}


    return (
      <React.Fragment >

        <nav className = "navbar navbar-light bg-light justify-content-center mt-3">
            <a className = "navbar-brand" href = "/" > React OCR </a><br/>
            <p> Optical Character Recognition with React and Tesseract.js </p> 
        </nav>


        <Dropzone 
        getUploadParams = {
         getUploadParams
      }
      onChangeStatus = {
          handleChangeStatus
      }
      maxFiles = {
          1
      }
      multiple = {
          false
      }
      canCancel = {
          false
      }
       accept = "image/jpeg, image/png, image/jpg"
        inputContent = {
            (files,extra) => (extra.reject ? 'Only PNG and JPG Image files are allowed' : 'Drop  image here')
        }
        styles = {
            {
                dropzoneActive: {
                    borderColor: 'green'
                },
                dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },
                    inputLabel: (files, extra) => (extra.reject ? { color: 'red' } : {}),
            }
        }
        /> 

</React.Fragment>
    )
};

export default App;

이제 업로드 기능을 성공적으로 추가했습니다.


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