Артём Мáлков

Tesseract.js - умное распознавание текста с изображения на JavaScript

15 окт5 комм

Ни для кого не секрет, что не так давно компания «Яндекс» взамен своего старого показателя ТИЦ (тематического индекса цитирования) ввела новый, более требовательный и живой показатель ИКС (индекс качества сайта). В нашем арсенале уже есть бесплатный инструмент для массовой проверки этого показателя, но поскольку на начальном этапе Яндекс блокировал массовые запросы с нашего IP к их сервису, мы стали думать, как можно еще решить поставленные перед нами задачи не в ущерб юзабилити сервиса. Яндекс отдает нам изображение с показателем ИКС (цифры), и мы подумали, а почему бы нам не взять и просто не распознать содержимое этого изображения? Запросов к сервису Яндекса мы никакие не делаем, а значит, способ весьма рабочий (в теории), осталось только его реализовать.

На просторах Интернета я случайно наткнулся на один очень интересный скрипт под названием «Tesseract.js». Он написан на JavaScript, удобен в использовании и может распознать большое количество текстов разных языков (русский, конечно, «хромает») и начертаний, даже с сопутствующими изображениями.

Чудо, не так ли?

Для того чтобы вам воспользоваться этим чудом, необходимо сделать несколько несложных шагов.

1. Скачайте архив в конце статьи. Содержимое загрузите на сайт, не меняя структуру папок и файлов.

2. Подключаете в секцию HEAD скрипт Tesseract.js:

<script src="/tesseract/tesseract.js"></script>

Не забудьте указать корректную ссылку до файла tesseract.js.

3. Далее напишем форму для выбора и отправки изображения с компьютера:

<input type="file" id="ocr_url" accept="image/*" />
<input type="button" id="ocr_button" value="Распознать текст" />

<div id="ocr_result"></div>

И, непосредственно, напишем сам скрипт-обработчик:

<script>
	
	window.onload = function() {
		
		document.getElementById("ocr_url").value = ""; // Сбрасываем форму после перезагрузки
		
		var control = document.getElementById("ocr_url");
		
		control.addEventListener("change", function() {
		
			var files = control.files;

			document.getElementById("ocr_button").addEventListener("click", function() {
				
				document.getElementById("ocr_result").innerHTML  = "Идет распознавание текста...";
			
				Tesseract.recognize(files[0].name).then(function(result) {
		
					document.getElementById("ocr_result").innerHTML  = result.text; 
		
				});
	 
			});
 
		});
		
	};
	
</script>

Его я рекомендую вставлять сразу после формы. Все просто, но если вдруг вместо текста вы получаете непонятный набор символов – скорее всего, язык текста определен неправильно. Это вполне нормальное явление. Как мы знаем, визуально буква «а» может быть как в русском и английском, так и в других языках. В таком случае вы меняете весь скрипт на этот:

<script>
	
	window.onload = function() {
		
		document.getElementById("ocr_url").value = ""; // Сбрасываем форму после перезагрузки
		
		var control = document.getElementById("ocr_url");
		
		control.addEventListener("change", function() {
		
			var files = control.files;

			document.getElementById("ocr_button").addEventListener("click", function() {
				
				document.getElementById("ocr_result").innerHTML  = "Идет распознавание текста...";
				
				Tesseract.recognize(files[0].name).then(function(result) {
			
					lang: "rus" // Язык текста
			
				}).then(function(result) {
				
					document.getElementById("ocr_result").innerHTML  = result.text;
				
				});
	 
			});
 
		});
		
	};
	
</script>

В нем «rus» – это русский язык. В вашем же случае вы меняете это значение на одно из предложенных ниже. Допустимые языки:

afr - Африкаанс
ara - Арабский
aze - Азербайджанский
bel - Белорусский
ben - Бенгальский
bul - Болгарский
cat - Каталонский
ces - Чешский
chi_sim - Китайский
chi_tra - Традиционный китайский
chr - Чероки
dan - Датский
deu - Немецкий
ell - Греческий
eng - Английский
enm - Английский (старый)
meme - Интернет-мем
epo - Эсперанто
epo_alt - Альтернатива эсперанто
equ - Math
est - Эстонский
eus - Баскский
fin - Финский
fra - Французский
frk - Франкский
frm - Французский (старый)
glg - Галисийский
grc - Древнегреческий
heb - Иврит
hin - Хинди
hrv - Хорватский
hun - Венгерский
ind - Индонезийский
isl - Исландский
ita - Итальянский
ita_old - Итальянский (старый)
jpn - Японский
kan - Каннада
kor - Корейский
lav - Латышский
lit - Литовский
mal - Малаялам
mkd - Македонский
mlt - Мальтийский
msa - Малайский
nld - Голландский
nor - Норвежский
pol - Польский
por - Португальский
ron - Румынский
rus - Русский
slk - Словацкий
slv - Словенский
spa - Испанский
spa_old - Старый испанский
sqi - Албанский
srp - Сербский (латинский)
swa - Суахили
swe - Шведский
tam - Тамильский
tel - Телугу
tgl - Тагалог
tha - Тайский
tur - Турецкий
ukr - Украинский
vie - Вьетнамский

По желанию, скрипт можно переписать под jQuery для удобства в дальнейшей разработке, привязать к ссылке или статичному объекту (изображению) на странице. Если вы хоть немного знакомы с JavaScript, то по описанным примерам в статье вы без труда сможете изменить скрипт под разные задачи.

А в качестве небольшого бонуса и личного интереса – внизу под статьей я приложил архив с тремя разными изображениями, которые вы можете использовать в отладке скрипта.

Автор скрипта – jeromewu.

Файл
Размер
Ссылка
tesseract.zip
18,69 Kb
Скачать с сервера
tesseract_img_test.zip
159,45 Kb
Скачать с сервера
Рекомендуем к просмотру
Управление API-ключами Яндекс.Карт: добавление, ограничение использования, блокировка
Посты
Как проверить наличие слова, фразы или текста в строке на PHP/JavaScript
Статьи и советы
iCatalyst - массовая оптимизация изображений без потери качества
Статьи и советы
5
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 0
    1
      •  Пользователь
    31 авг в 09:14

    Добрый день! Спасибо за статью. Тоже столкнулся с ошибкой

    текст из консоли браузера:

    tesseract.js:306

    GET http://127.0.0.1:5500/1.png 404 (Not Found)

    loadImage @ tesseract.js:306

    sendPacket @ tesseract.js:274

    _send @ tesseract.js:469

    (anonymous) @ tesseract.js:561

    (anonymous) @ tesseract.js:594

    _dequeue @ tesseract.js:604

    _delay @ tesseract.js:596

    recognize @ tesseract.js:557

    (anonymous) @ index.html:35 // строка: Tesseract.recognize(files[0].name).then(function(result) {

      • 0
      1066
        •  Команда Pandoge
      8 сен в 00:59

      Евгений Ермаков, здравствуйте!

      Если я не ошибаюсь, у вас по пути http://127.0.0.1:5500/1.png нет изображения, текст с которого нужно распознать.

    • 0
    1
      •  Пользователь
    16 мая в 21:37

    в архиве нет полного кода что-бы можно было сразу запустить у себя и разобраться с кодом ( пожалуйста добавьте архив с рабочим скриптом. все что я пытался повторить с сайта увы не работает

      • 2
      1066
        •  Команда Pandoge
      17 мая в 02:35

      Андрей Киевский, здравствуйте! Давайте разбираться почему не работает.

      После того, как сделали всё описанное - есть ли какие-то ошибки в консоли разработчика?

    • 2
    1
      •  Проверенный
    10 ноя в 13:55

    Полезная статья, спасибо!

Подняться наверх
«Pandoge» - помощник вебмастера