Распознавание текста на изображениях с помощью Tesseract.js
4
0
Tesseract.js — это современная JavaScript-библиотека, которая позволяет выполнять оптическое распознавание символов (OCR) прямо в браузере или на сервере с использованием Node.js. Эта мощная технология открывает широкие возможности для работы с цифровыми документами, фотографиями и любыми изображениями, содержащими текстовую информацию.
Основные преимущества использования Tesseract.js:
— Высокая точность распознавания текста
— Поддержка более 100 языков
— Возможность автоматического определения ориентации текста
— Работа как в браузерной, так и в серверной среде
— Открытый исходный код и активное сообщество разработчиков
— Простой API для интеграции в проекты
Установка и настройка
Установка в проекте
Для начала работы с Tesseract.js необходимо установить библиотеку в ваш проект. Если вы используете Node.js, выполните следующую команду:
bash npm install tesseract.js
Для браузерного использования вы можете подключить библиотеку через CDN:
html <script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.1.4/dist/tesseract.min.js"></script>
Базовая конфигурация
После установки создайте экземпляр Tesseract:
javascript
const { createWorker } = Tesseract;
const worker = createWorker({
logger: m => console.log(m), // Вывод логов процесса
});
Вы также можете настроить дополнительные параметры при создании Worker:
javascript
const worker = createWorker({
langPath: '/custom/lang/path', // Путь к пользовательским языковым файлам
corePath: '/custom/core/path', // Путь к пользовательскому ядру
workerPath: '/custom/worker/path', // Путь к пользовательскому worker'у
});
Основные функции и возможности
Распознавание текста
Основная функция Tesseract.js — это распознавание текста на изображениях. Вот простой пример использования:
javascript
(async () => {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const { data: { text } } = await worker.recognize('path/to/image.png');
console.log(text);
await worker.terminate();
})();
Многозадачность
Tesseract.js поддерживает работу с несколькими изображениями одновременно:
javascript
const workers = Array.from({ length: 5 }, () => createWorker());
Promise.all(workers.map(async worker => {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
}));
// Обработка нескольких изображений параллельно
const images = ['image1.png', 'image2.png', 'image3.png'];
const results = await Promise.all(images.map(async image => {
return workers[0].recognize(image);
}));
Языковые пакеты
Библиотека поддерживает более 100 языков. Чтобы использовать нужный язык, сначала загрузите соответствующий языковой пакет:
javascript
await worker.loadLanguage('rus'); // Русский язык
await worker.loadLanguages(['eng', 'fra']); // Английский и французский
await worker.initialize('eng+fra'); // Инициализация нескольких языков
Продвинутые возможности
Автоматическое определение языка
Tesseract.js может автоматически определять язык текста:
javascript
const { data: { orientation, script, language } } = await worker.detect('path/to/image.png');
console.log(`Ориентация: ${orientation}`);
console.log(`Скрипт: ${script}`);
console.log(`Язык: ${language}`);
Получение детальной информации
Вы можете получить подробную информацию о расположении текста, слов и символов:
javascript
const { data: { lines, words, symbols } } = await worker.recognize('path/to/image.png', {
tessedit_create_hocr: '1',
});
console.log(lines); // Информация о строках
console.log(words); // Информация о словах
console.log(symbols); // Информация о символах
Настройка параметров распознавания
Для повышения точности распознавания можно настроить различные параметры:
javascript
await worker.setParameters({
tessedit_pageseg_mode: '6', // Режим сегментации страницы
tessedit_char_whitelist: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // Белый список символов
user_words_suffix: 'user-words', // Суффикс пользовательских словарей
});
Примеры использования
Простой OCR-сканер документов
javascript
document.getElementById('upload').addEventListener('change', async (event) => {
const [file] = event.target.files;
const worker = createWorker();
try {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const { data: { text } } = await worker.recognize(file);
document.getElementById('output').innerText = text;
} finally {
await worker.terminate();
}
});
Распознавание текста с камеры
javascript
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
const video = document.createElement('video');
video.srcObject = stream;
video.play();
setInterval(async () => {
const canvas = document.createElement('canvas');
canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
const worker = createWorker();
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const { data: { text } } = await worker.recognize(canvas);
console.log(text);
await worker.terminate();
}, 1000);
});
Создание поискового индекса для сканированных документов
javascript
const documents = ['doc1.png', 'doc2.png', 'doc3.png'];
const index = {};
for (const doc of documents) {
const { data: { text } } = await worker.recognize(doc);
index[doc] = text.split(/\s+/).filter(Boolean);
}
function search(query) {
return Object.entries(index).filter(([doc, words]) =>
words.some(word => word.includes(query))
).map(([doc]) => doc);
}
Настройка производительности
Оптимизация времени выполнения
Чтобы ускорить процесс распознавания, можно:
— Использовать предварительно обученные модели
— Ограничить область интереса
— Установить белый список символов
— Настраивать параметры сегментации страницы
Параллельная обработка
Для обработки большого количества изображений используйте несколько worker’ов:
javascript
const pool = [];
for (let i = 0; i < 4; i++) {
const worker = createWorker();
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
pool.push(worker);
}
async function processImages(images) {
const results = await Promise.all(images.map(async (image, index) => {
const worker = pool[index % pool.length];
return worker.recognize(image);
}));
return results;
}
Тестирование и отладка
Логирование
Включите логирование для отслеживания процесса распознавания:
javascript
const worker = createWorker({
logger: m => console.log(m),
});
Анализ ошибок
Если распознавание выполняется некорректно, проверьте:
— Качество изображения
— Настройки языковых моделей
— Параметры сегментации
— Белые списки символов
Профилирование производительности
Используйте инструменты профилирования для анализа времени выполнения:
javascript
console.time('OCR');
await worker.recognize('path/to/image.png');
console.timeEnd('OCR');
Интеграция с другими технологиями
React
Пример использования Tesseract.js в React-приложении:
javascript
import React, { useState, useEffect } from 'react';
import { createWorker } from 'tesseract.js';
function App() {
const [text, setText] = useState('');
useEffect(() => {
const worker = createWorker();
(async () => {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const { data: { text } } = await worker.recognize('path/to/image.png');
setText(text);
await worker.terminate();
})();
}, []);
return <div>{text}</div>;
}
Vue.js
Пример использования в Vue.js:
javascript
export default {
data() {
return {
text: '',
};
},
async mounted() {
const worker = createWorker();
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const { data: { text } } = await worker.recognize('path/to/image.png');
this.text = text;
await worker.terminate();
},
};
Angular
Пример использования в Angular:
typescript
import { Component, OnInit } from '@angular/core';
import { createWorker } from 'tesseract.js';
@Component({
selector: 'app-root',
template: `<div>{{ text }}</div>`,
})
export class AppComponent implements OnInit {
text = '';
async ngOnInit() {
const worker = createWorker();
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const { data: { text } } = await worker.recognize('path/to/image.png');
this.text = text;
await worker.terminate();
}
}
Заключение
Tesseract.js — это мощный инструмент для оптического распознавания символов, который предоставляет широкие возможности для работы с текстом на изображениях. Благодаря своей гибкости и открытому исходному коду, библиотека может быть легко интегрирована в различные проекты и адаптирована под конкретные потребности.
Основные преимущества использования Tesseract.js:
— Высокая точность распознавания
— Поддержка множества языков
— Возможность работы в браузере и на сервере
— Простой API для интеграции
— Активное сообщество разработчиков
— Возможность настройки параметров распознавания
Для получения дополнительной информации и примеров использования рекомендуется ознакомиться с официальной документацией на GitHub
Эта библиотека станет незаменимым инструментом для разработчиков, работающих с цифровыми документами, фотографиями и любыми изображениями, содержащими текстовую информацию.
