디아블로4 경매 사이트 만들기 (1) - OCR, Tesseract.js

개요

https://4sii.tistory.com/602

[OCR] Tesseract.js

Tesseract를 통해 이미지의 텍스트 인식 기능까지 확인을 마쳤고

실제로 사용하게될 리액트 상에서의 기능 구현을 진행해보았다.

 

코드

import Tesseract from 'tesseract.js';
import { useState } from "react";
import ProgressBar from 'react-bootstrap/ProgressBar';

function App() {
  const [log, setLog] = useState({status: 'default', progress: 0});
  const [imagePath, setImagePath] = useState("");
  const [result, setResult] = useState("");
 
  const handleChange = (event) => {
    const tempImagePath = URL.createObjectURL(event.target.files[0]);

    setImagePath(tempImagePath);

    Tesseract.recognize(
      tempImagePath, 
      'eng+kor', 
      {logger: m => {
        setLog({
          status: m.status, 
          progress: Math.floor(m.progress.toFixed(2) * 100)
        })
      }}
    ).catch (err => {
      console.error(err);
    }).then(({ data: { text } }) => { 
      setResult(text); 
    })
  }

  return (
    <div className="App">
      <main className="App-main">
        <h3>이미지 업로드</h3>
        <img src={imagePath} className="upload_img" alt='upload_img'/>
        <input type="file" onChange={handleChange}/>

        <h3>인식 결과</h3>
        {'분류중 >>'} <ProgressBar label={`${log.progress}%`} now={log.progress} ></ProgressBar>
        <div className="text-box"><p>result: {result}</p></div>
      </main>
    </div>
  );
}

export default App;

의도한대로 이미지 업로드 시 인식 과정을 거쳐 추출된 텍스트가 나오고 있다.

 

진행 예정인 부분

• 업로드 이미지에 대해 
  • 아이템이 아닌 사진을 올릴 경우 체크
  • 아이템만 하이라이트 시킨 사진이 아닌 게임 전체 사진일 경우
    1. 이미지 업로드 드래그 앤 드랍
    2. 드랍한 이미지에 대해 필요한 부분 자르기
    3. 자른 부분에 대해 아이템 분류
  • 인식된 텍스트로 아이템 분류
    1. 희귀 아이템이 아닐 경우 제외
• 아이템 분류
  • 일반, 신성, 선조
  • 아이템 부위
  • 요구 레벨
• 배틀넷 로그인 연동 -> https://helltides.com 처럼 진행하면 좋을듯
• 댓글 다는 것 처럼 보유 골드로 경매 경쟁
• 경매가 아닌 나눔도 지원할 예정

 

참고 사이트

https://www.smashingmagazine.com/2021/06/image-text-conversion-react-tesseract-js-ocr/

Image To Text Conversion With React And Tesseract.js (OCR) — Smashing Magazine