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.
