React#2로 OCR 구현
2426 단어 reacttutorialopensourcebeginners
이 튜토리얼에서는 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부 클릭의 경우
Reference
이 문제에 관하여(React#2로 OCR 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/honorezemagho/implement-ocr-with-react-2-li텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)