개요

조금 전에 OCR이라는 존재를 알고, 실제로 만져보고 싶다고 생각해는 이미 2개월. . . .
겨우 살짝 무거운 허리를 올려 브라우저에서 기능하는 OCR 라이브러리가 없을까 찾고 있었는데,,,
OSS에서 Tesseract.js를 찾아 조금 사용해 보았으므로 소개하고 싶습니다.

원래 OCR은 무엇입니까?

OCR은 Optical Character Reader/Recognition의 약자로,
이미지 데이터의 텍스트 부분을 인식하여 문자 데이터로 변환하는 광학 문자 인식 기능을 의미합니다.

이를 활용하면 데이터 입력이라는 매우 효율적인 작업을 없앨 수 있습니다.
최근이라면 QR 코드의 OCR도 있으므로 꽤 재미있는 기술이 되고 있습니다.

Tesseract.js에서 쉽게 OCR

Tesseract.js를 사용하여 브라우저에서 할 수 있는 OCR을 구현해 봅시다.
이번에는 React를 사용합니다.

$ npx create-react-app sample-ocr
$ cd sample-ocr
// Tesseract.jsをインストール
$ yarn add tesseract.js

이제 구현 준비가 완료되었습니다.
이번에는 필요 최소한의 구현만 합니다.
어디까지나, Tesseract.js 를 사용하기 위해서만의 것입니다.

App.js

import React, { useState } from 'react';
import { createWorker } from 'tesseract.js';
import './App.css';

function App() {
  const [file, setFile] = useState();
  const [textOcr, setTextOcr] = useState('');
  const worker = createWorker({
    logger: m => console.log(m)
  })

  const tryOcr = async() => {
    await worker.load();
    await worker.loadLanguage('eng');
    await worker.initialize('eng');
    const { data: { text } } = await worker.recognize(file);
    setTextOcr(text);
    await worker.terminate();
  }

  // fileData 取得
  const handleChange = (e) => {
    console.log(e.target.files[0]);
    setFile(e.target.files[0])
  }

  const handleClick = async() => {
    if (!file) return
    setTextOcr('Recognizing...')
    await tryOcr();
  }

  return (
    <div className="App">
      <input type="file" onChange={handleChange} /><br />
      <button className="button" onClick={handleClick}>Try OCR</button>
      <div>
        {textOcr}
      </div>
    </div>
  );
}

export default App;

자, 빨리 영어 이미지를 올려 보자.


결과↓↓


어떻게든 읽을 수있는 것 같다> <

다음은 일본어로 읽어 보자.
아래와 같은 부분을 바꿀 필요가 있으므로 주의! !

await worker.loadLanguage('eng');
await worker.initialize('eng');
↓↓↓
await worker.loadLanguage('jpn');
await worker.initialize('jpn');

읽을 이미지는


결과↓↓


이 정도 예쁜 이미지로, 단문이라고 제대로 읽을 수 있다는 것을 알았습니다.

조금 긴 문장


결과↓↓

대단해! ! 해석할 수 있다! !

필기는??


결과↓↓

어라＞＜

요약

브라우저에서도 OCR은 상당히 쉽게 실현할 수 있었습니다.
정밀도의 면에서 말하면 화상이 깨끗하다고 ​​해석 결과는 좋은 생각은 했습니다만,
세로 문자나 필기 해석의 정밀도가 낮다고 생각했습니다. (영어라면 정밀도 높은 것일까??)
이번은 Tesseract.js 의 최저한의 기능 밖에 사용하지 않기 때문에 , 뭔가의 옵션 기능등을 사용하면 좀 더 정밀도를 올릴 수 있을 것 같다.
실제의 공식 github에는, 리얼타임으로 친 문자를 해석해 주는 샘플도 아류 때문에 흥미있는 분은 조금 만져 보면 좋을까 생각합니다!

참조

Tesseract.js 공식