Ви пропустили лекцію і попросили зошит у однокурсника, щоб надолужити матеріал. Але переписувати довгий конспект немає ні часу, ні бажання - що ж робити?

Знадобиться додаток, що розпізнає текст в нетекстових документах. На щастя, така технологія існує і називається OCR ( Optical Character Recognition) . Більш того, вона доступна навіть на JavaScript.

Витяг тексту з зображення за допомогою бібліотеки Tesseract.js

Зустрічайте Tesseract.js - потужну бібліотеку, яка вміє розпізнавати символи на будь-якому зображенні. Сьогодні ми розберемося, як з нею працювати.

1. Підключаємо Tesseract.js

Tesseract.js - це звичайна JavaScript-бібліотека. Щоб використовувати її можливості в проекті, необхідно підключити потрібний файл. Зробити це можна будь-яким зручним способом, наприклад, використовуючи CDN ( https://unpkg.com/tesseract.js@v2.0.0-alpha.13/dist/tesseract.min.js ) або у вигляді npm-пакета:

// через npm
npm install tesseract.js

// через yarn
yarn add tesseract.js

2. Готуємо розмітку

Згідно з офіційним сайтом Tesseract.js підтримує більше 100 мов, в тому числі і українську - для демонстрації можливостей додамо в додаток вибір мови. Ще нам буде потрібно input для завантаження самого зображення і поле для виведення результатів обробки.

Найпростіша розмітка виглядає так:

<! - селект для вибору мови ->
< Select  id = " langs " >
  < Option  value = " uа " selected > Українська </ option >
  < Option  value = " eng " > English </ option >
</ Select >


<! - інпут для завантаження файлу зображення ->
< Input  type = " file " id = " file " />


<! - лог процесу обробки і відображення результату ->
< Div  id = " log " > </ div >


<! - кнопка Почати обробку ->
< Button  type = " button " id = " start " > Почати обробку </ button >



3. Запускаємо Tesseract

3.1. Worker

Всю роботу виконує воркер TesseractWorker, тому імпортуємо з пакета tesseract.js функцію createWorker. При створенні воркера можна передати функцію логування, викликану при переході між етапами обробки.

import { createWorker } from 'tesseract.js';

const worker = createWorker({
  logger: (data) => console.log(data)
});



Вхідний в логгер об'єкт даних містить два поля: status і progress - їх можна використовувати для відображення прогресу обробки.

Логування процесу обробки зображення

Ініціалізуємо воркер з потрібними настройками мови і запускаємо процес розпізнавання:            

async function recognize() {
  const file = document.getElementById('file').files[0];
  const lang = document.getElementById('langs').value;
  await worker.load();
  await worker.loadLanguage(lang);
  await worker.initialize(lang);
  const { data: { text } } = await worker.recognize(file);
  console.log(text);
  await worker.terminate();
  return text;
}

3.2. Метод recognize

Те ж саме можна зробити більш декларативно - за допомогою методу recognize об'єкта Tesseract:

import Tesseract from 'tesseract.js';

function recognize() {
  const file = document.getElementById('file').files[0];
  const lang = document.getElementById('langs').value;

  return Tesseract.recognize(file, lang, {
      logger: data => console.log(data),
    })
   .then(({ data: {text }}) => {
     console.log(text);
     return text;
   })
}

Цей метод приймає файл, мову і об'єкт налаштувань з логгером. Метод працює асинхронно і повертає звичайний Promise.

4. Відображення прогресу і результату

В результаті виконання методу recognize ми отримуємо багато корисних даних:

Результат роботи методу recognize

Тут не тільки витягнутий текст, але і рівень впевненості (confidence), і навіть розташування на зображенні символів, слів, абзаців.

Залишилося продемонструвати отримані результати користувачеві.

const log = document.getElementById('log');

// прогрес обробки
function updateProgress(status, progressValue) {
  log.innerHTML = '';
  const statusText = document.createTextNode(status);
  const progress = document.createElement('progress');
  progress.max = 1;
  progress.value = progressValue;
  log.appendChild(statusText);
  log.appendChild(progress);
}

// Вивід результату
function setResult(text) {
  log.innerHTML = '';
  text = text.replace(/\n\s*\n/g, '\n');
  const pre = document.createElement('pre');
  pre.innerHTML = text;
  log.appendChild(pre);
}

Нарешті, додамо обробник кліків на кнопку "почати обробку" і зберемо все разом:

import Tesseract from 'tesseract.js';

// Розпізнавання зображення
function recognize(file, lang, logger) {
  return Tesseract.recognize(file, lang, {logger})
   .then(({ data: {text }}) => {
     return text;
   })
}
const log = document.getElementById('log');

// прогрес обробки
function updateProgress(data) {
  log.innerHTML = '';
  const statusText = document.createTextNode(data.status);
  const progress = document.createElement('progress');
  progress.max = 1;
  progress.value = data.progress;
  log.appendChild(statusText);
  log.appendChild(progress);
}

// Вивід результату
function setResult(text) {
  log.innerHTML = '';
  text = text.replace(/\n\s*\n/g, '\n');
  const pre = document.createElement('pre');
  pre.innerHTML = text;
  log.appendChild(pre);
}

document.get ElementById('start').addEventListener('click', () => {
  const file = document.getElementById('file').files[0];
  if (!file) return;

  const lang = document.getElementById('langs').value;

  recognize(file, lang, updateProgress)
    .then(setResult);
});



Ось і вся програма! Експериментуйте з різними зображеннями і мовами.

Tesseract.js - відмінна JS-бібліотека для розпізнавання тексту з зображень. Звичайно, її можливості сильно обмежені. Зашумлений фон і нестандартні шрифти істотно знижують точність обробки. Однак для багатьох проектів вона може стати чудовим рішенням.

Джерело перекладу