Массовая проверка показателя «ИКС» от Яндекс   •   Online-инструменты
426 просм
1 комм
Поделиться:

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

Ни для кого не секрет, что не так давно компания «Яндекс» взамен своего старого показателя ТИЦ (тематического индекса цитирования) ввела новый, более требовательный и живой показатель ИКС (индекс качества сайта). В нашем арсенале уже есть бесплатный инструмент для массовой проверки этого показателя, но поскольку на начальном этапе Яндекс блокировал массовые запросы с нашего 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.

ФайлРазмерСсылка
1
комментарий
Полезная статья, спасибо!
  • 0
Гостям запрещено учавствовать в обсуждениях сайта. Авторизуйтесь, чтобы иметь возможность оставить свое мнение о материале или задать вопрос.