Tesseract.js
Tesseract.js는 브라우저에서 돌아가는 순수 JavaScript OCR(광학 문자 인식) 라이브러리입니다.
이미지에서 텍스트를 추출할 수 있으며, 별도의 서버 없이 클라이언트만으로 동작해요.
특징
| 작동 환경 |
브라우저 또는 Node.js 모두 지원 |
| 언어 지원 |
영어, 한글 포함 다국어 (학습 파일 필요) |
| 동작 방식 |
이미지 → WebAssembly → 텍스트 추출 |
| 의존성 |
Web Worker + WASM 파일 |
| 설치 방식 |
npm install tesseract.js 또는 CDN/로컬 로드 가능 |
| 오픈소스 |
무료, MIT 라이선스 |
기본 사용법 (v6 기준)
import { createWorker } from 'tesseract.js';
const worker = await createWorker();
await worker.reinitialize('eng'); // 언어 초기화
const { data } = await worker.recognize(imageData); // base64 or 이미지 URL
console.log(data.text);
await worker.terminate();
주요 메서드
| createWorker() |
새로운 워커(작업자) 생성 |
| reinitialize(lang) |
사용할 언어 설정 (v6부터 통합됨) |
| recognize(image) |
이미지에서 텍스트 추출 |
| terminate() |
워커 종료 (리소스 정리) |
이미지 형식
- data:image/png;base64,...
- URL (public image)
- Blob 또는 File
지원 언어 예시
| 영어 |
eng |
| 한글 |
kor |
| 일본어 |
jpn |
| 중국어 |
chi_sim |
| 다국어 혼합 |
'eng+kor' 등 조합 가능 |
주의할 점
| 📛 Web Worker 제한 |
크롬 확장 popup, background 등 제한 있음 |
content script 또는 fetch API 대체 |
| 🧩 WASM 경로 문제 |
경로 명시 안 하면 작동 실패 |
corePath, workerPath 설정 필요 |
| 📉 인식률 문제 |
흐릿하거나 배경색 강할 경우 실패 |
해상도/명도 개선 필요 |
언제 사용하면 좋을까?
| 서버 없이 OCR 하고 싶을 때 |
✅ 매우 적합 |
로컬에서 처리 가능 |
| 확장 프로그램에서 직접 인식 |
⚠️ 조건부 |
manifest/CSP/WASM 이슈 고려 필요 |
| 대규모 OCR 처리 |
❌ 부적합 |
서버 OCR API 추천 (Google Vision 등) |
오류 및 해결 코드
// 오류
const worker = await createWorker();
await worker.loadLanguage('eng');
await worker.initialize('eng');
// 해결
const worker = await createWorker();
await worker.reinitialize('eng');
//또는 (확실하지는 않지만 일단 타입오류는 발생하지 않음)
const worker = await createWorker('eng');
// 오류
importScripts("https://cdn.jsdelivr.net/npm/tesseract.js@v6.0.0/dist/worker.min.js");
크롬 확장 보안(CSP)에 의해 Manifest V3에서는 **service_worker (background script)**나 **importScripts()**를 사용해서
외부 CDN 스크립트를 불러오는 것이 금지
크롬 확장에서 사용 불가해서 일단은 Google Cloud Vision API를 사용해야겠다.
