포시코딩

[OCR] Tesseract.js 본문

JavaScript

[OCR] Tesseract.js

포시 2023. 6. 15. 12:55
728x90

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

 

[OCR] Tesseract 사용방법 (mac)

설치 homebrew install tesseract pip install pytesseract pip install pillow # 이미지 분석, 처리 라이브러리 테스트 코드 test.py 파일과 테스트할 이미지를 같은 위치에 둔 상태로 아래 코드로 테스트 진행 from PIL i

4sii.tistory.com

 

어제 Tesseract에 대해 처음 알게되어 파이썬으로 테스트를 해봤고 생각보다 괜찮은 결과물을 얻을 수 있었다.

만약 내가 사이트를 구현하게 된다면 

react에서 이미지 업로드 -> tesseract로 이미지에서 텍스트 추출 -> 추출된 결과물 및 이미지 서버로 전송

의 플로우를 거치게 될텐데 그러면 프론트엔드에서 파이썬 서버로 요청&응답을 기다려야 하는 상황이 생긴다.

 

다행히 tesseract.js를 통해 javascript 환경에서도 OCR을 사용할 방법이 있었고

테스트 결과는 아래와 같다.

 

코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="test('sample.png')">test1</button>
  <button onclick="test('sample2.png')">test2</button>
  <button onclick="test('sample3.png')">test3</button>

  <script src='https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js'></script>
  <script>
    function test(target) {
      Tesseract.recognize(
        `./${target}`,
        'eng+kor',
        { 
          // logger: m => console.log(m) 
        }
      ).then(({ data: { text } }) => {
        console.log(text);
      })
    }
  </script>
</body>
</html>

어제까지 진행한 테스트와 동일하게 진행하였다. 

logger를 나타내는 부분은 추후 진행중.. 과 같이

사용자에게 텍스트를 추출하고 있다는 정보를 표현하는데 사용할 수 있을 것으로 보인다.

728x90
저작자표시

'JavaScript' 카테고리의 다른 글

Cropper.js - 이미지 자르기 라이브러리  (0) 2023.07.09
[Vue 3.0] data()와 methods() 대신 setup() 사용하기  (0) 2023.06.21
location.href 안먹히는 현상  (0) 2023.02.05
[IntersectionObserver] 무한 스크롤 (Infinite scroll)  (0) 2023.01.24
[TypeScript][노마드코더] #4 CLASSES AND INTERFACES(5) - Polymorphism, Generic  (0) 2023.01.22
'JavaScript' Related Articles more