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

Ни для кого не секрет, что не так давно компания «Яндекс» взамен своего старого показателя ТИЦ (тематического индекса цитирования) ввела новый, более требовательный и живой показатель ИКС (индекс качества сайта). В нашем арсенале уже есть бесплатный инструмент для массовой проверки этого показателя, но поскольку на начальном этапе Яндекс блокировал массовые запросы с нашего IP к их сервису, мы стали думать, как можно еще решить поставленные перед нами задачи не в ущерб юзабилити сервиса. Яндекс отдает нам изображение с показателем ИКС (цифры), и мы подумали, а почему бы нам не взять и просто не распознать содержимое этого изображения? Запросов к сервису Яндекса мы никакие не делаем, а значит, способ весьма рабочий (в теории), осталось только его реализовать.
На просторах Интернета я случайно наткнулся на один очень интересный скрипт под названием «Tesseract.js». Он написан на jаvascript, удобен в использовании и может распознать большое количество текстов разных языков (русский, конечно, «хромает») и начертаний, даже с сопутствующими изображениями.
Чудо, не так ли?
Для того чтобы вам воспользоваться этим чудом, необходимо сделать несколько несложных шагов.
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 для удобства в дальнейшей разработке, привязать к ссылке или статичному объекту (изображению) на странице. Если вы хоть немного знакомы с jаvascript, то по описанным примерам в статье вы без труда сможете изменить скрипт под разные задачи.
А в качестве небольшого бонуса и личного интереса – внизу под статьей я приложил архив с тремя разными изображениями, которые вы можете использовать в отладке скрипта.




Скачать файл: tesseract_img_test.zip [159,45 Kb] (cкачиваний: 0)
Скачать файл: tesseract_pandoge_com.zip [18,69 Kb] (cкачиваний: 0)



скачать dle 11.3
Добавить комментарий

Оставить комментарий