포시코딩

Tesseract.js - (OCR) 이미지 텍스트 인식 라이브러리 본문

JavaScript

Tesseract.js - (OCR) 이미지 텍스트 인식 라이브러리

포시 2023. 7. 9. 21:27
728x90

개요

이미지상의 텍스트 인식을 도와주는 라이브러리

C++로 만들어진 Tesseract OCR engine의 JavaScript 포팅 버전이다. 

 

https://github.com/naptha/tesseract.js

 

GitHub - naptha/tesseract.js: Pure Javascript OCR for more than 100 Languages 📖🎉🖥

Pure Javascript OCR for more than 100 Languages 📖🎉🖥 - GitHub - naptha/tesseract.js: Pure Javascript OCR for more than 100 Languages 📖🎉🖥

github.com

 

세팅

문서상의 Installation 항목을 따라하면 된다.

나는 CDN 링크를 사용할 거임

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src='https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js'></script>
</body>
</html>

 

세팅은 이게 끝이다. 

 

코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img id="sample_img" src="./tesseract_sample.png">
  <button onclick="handleClick()">버튼</button>

  <script src='https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js'></script>
  <script>
    const handleClick = () => {
      Tesseract.recognize(
        document.querySelector('#sample_img'),
        'kor', // 영어일 경우 eng, 둘 다: eng+kor
        { logger: m => { console.log(m) } }  // 인식 진행 상태 관련 로그
      )
      .then(({ data: { text } }) => { 
        console.log(text);  // 이미지에서 추출된 텍스트
      })
      .catch (err => { console.error(err); })
      }
  </script>
</body>
</html>

사용된 샘플 이미지 - tesseract_sample.png

작성된 코드와 샘플 이미지. 

버튼 클릭 시 img 요소 정보를 가져온 후 한국어 텍스트를 찾아 출력한다.

주석에도 써놨듯 영어로 인식할거면 eng, 둘 다 인식할거면 eng+kor 와 같이 사용하면 된다.

Tesseract.js의 장점 중 하나로 100개 국가가 넘는 언어를 지원하니 그 외 언어는 직접 찾아보길

 

결과

위 코드를 그대로 따라할 경우 위와 같은 결과를 얻을 수 있다.

logger로 인해 인식 과정에서의 로그가 위와 같이 출력되었고

그 결과 '테 스 트 23'이 인식되어 나왔다. 

 

로그와 결과물에 대한 가공은 알아서 입맛대로 하면 된다.

 

+ 보충 1 - 결과 가공

결과물에 대한 가공 방법 중

여러 줄로 이루어진 텍스트를 인식하는 방법을 소개한다.

Tesseract.recognize(
  document.querySelector('#sample_img'),
  'kor',
  // { logger: m => { console.log(m) } }
)
.then(({ data: { text } }) => { 
  text = text
  .split('\n')
  .map((line) => line.trim()
  .replace(/\s/g, '')
  )
  .filter((line) => line !== "");
  console.log(text);
})

텍스트가 여러 줄로 이루어졌을 경우 위 코드와 같이 작성하면 배열로 결과를 얻을 수 있어

활용하기 좋다.

 

+ 보충 2 - progress bar

인식할 텍스트의 양이 많을 경우 시간이 소요되는데

진행중인 상태를 사용자에게 보여주는게 좋다. 

 

위에서 나온 logger를 활용할 건데 직접 찍어보면 알겠지만

여러 종류의 상태가 존재한다. 

그 중 recognize text 상태가 제일 마지막인데다 오래 걸리는 상태니 이걸 활용할거임

 

html

<div>진행상황: 
  <progress value="0" min="0" max="100"></progress>
</div>

js

Tesseract.recognize(
  document.querySelector('#sample_img'),
  'kor',
  { logger: m => { 
    if (m.status == 'recognizing text') {
      progress_value = (m.progress).toFixed(2) * 100;
      document.querySelector('progress').value = progress_value;
    }
  }}
)
.then(({ data: { text } }) => { 
  text = text
  .split('\n')
  .map((line) => line.trim()
  .replace(/\s/g, '')
  )
  .filter((line) => line !== "");
  console.log(text);
})

m.status가 'recogizing text'인 경우에 대해 progress 값을 감지하여 백분율로 나타냈다.

progress 태그를 사용하면 추가 css를 작성할 필요 없이 바로 진행바가 나옴

 

+ 보충 3 - Cropper.js와의 연계

추가적으로 이미지에서 텍스트를 추출하고 싶은 범위만 선택해 인식하게끔

crop 기능을 같이 써주면 더 정확한 결과물을 얻을 수 있다.

 

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

 

Cropper.js - 이미지 자르기 라이브러리

개요 canvas를 활용한 이미지 자르기 기능을 도와주는 라이브러리 저장된 이미지 또는 업로드한 이미지를 원하는 크기만큼 잘라 활용할 수 있다. https://fengyuanchen.github.io/cropperjs/ Cropper.js fengyuanchen

4sii.tistory.com

 

이 과정에서 canvas에 결과물을 넣게될텐데

canvas에서 가져오는 값이 img에서 가져올 때랑 달라 에러가 발생할 경우 아래 코드 참고

const dataUrl = document.querySelector('canvas').toDataURL();

fetch(dataUrl)
.then(response => response.blob())
.then(blob => {
  Tesseract.recognize(
    URL.createObjectURL(blob), 
    'kor',
    { logger: m => { }}
  )
  .then(({ data: { text } }) => { })
  .catch (err => { console.error(err); })
})

 

728x90
저작자표시

'JavaScript' 카테고리의 다른 글

Onclick vs. AddEventListener, 버블링, 캡쳐링  (0) 2023.07.17
OpenCV.js - CV(Computer Vision) 오픈 소스 라이브러리  (0) 2023.07.09
Cropper.js - 이미지 자르기 라이브러리  (0) 2023.07.09
[Vue 3.0] data()와 methods() 대신 setup() 사용하기  (0) 2023.06.21
[OCR] Tesseract.js  (0) 2023.06.15
'JavaScript' Related Articles more