WinterSchoolFront

Расспознавание паспорта и заполнение анкет.

Цели: Оптимизация ввода паспортных данных при регистрации посредством распознавания изображения паспорта.

На главной странице располагаются панель загрузки файлов и форма для заполнения своих данных паспорта. На панеле загрузки файлов располагаются две кнопки Загрузить фотографию и Сделать фото, а также поле выбора режима обработки фото.

Пользователь имеет возможность как загрузить уже имеющуюся фотографию паспорта, так и в сделать фото посредством камеры своего устройства.

По кнопке Загрузить фотографию отображается форма для открытия нужного изображения. В эту форму пользователь перетаскивает нужное изображение паспорта, или при нажатии на кнопку Выбрать фотографию, в открывшемся окне выбора файлов выбирает данное изображение. Далее пользователь нажимает на кнопку Распознать и выбранная фотография отправляется на распознавание.

При нажатии на главном экране кнопки Сделать фото открывается камера. Внизу экрана, на панели меню камеры располагаются четыре кнопки: Закрыть камеру, Отзеркалить,Сменить камеру и Сделать фото. Они позволяют, соответственно:

закрыть камеру (также закрыть камеру возможно по нажатию клавиши Назад на телефоне или в браузере);
отзеркалить изображение (необходимо для пользователей, в настройках камеры которых стоит отзеркаливание фронтальной камеры);
выбрать нужную камеру (Основную или Фронтальную);
сделать фотографию.

Чем ровнее сделано фото паспорта, тем с большей точностью распознаётся текст на нём. Поэтому, для удобства пользователю поверх изображения камеры отрисовывается трафарет, отображающий необходимые границы краёв паспорта и фото на нём. В зависимости от разрешения экрана трафарет настраивается самостоятельно.

После получения снимка камера закрывается, а полученное изображение обрезается по рамке, и также, как и при Загрузке фотографии отправляется на распознавание.

Поле выбора на главной странице имеет два значения: На фронте и На бэке. В зависимости от того, что перед началом выбрал пользователь распознание будет происходить либо на его устройстве либо на сервере.

Когда фото было скачано или снято, оно передается в File Service, где происходит вызов распознавателя текста на изображении. После распознания получается json, который передается Passport Service, где происходит обработка полученных значений (в частности перевод даты из строки в обычный формат) и передача их на форму для заполнения своих данных.

После пользователь может отредактировать данные на форме и отправить их с помощью кнопки Отправить на форме.

Development server. Запуск локально.

Установка пакетов npm i.

Запуск сервера для разработки ng serve. Перейти на http://localhost:4200/.

Deploy

Деплой на осуществляется на GitHub pages. Необходимо сделать fork и изменить в package.json gh-pages npx gh-pages -d dist/**название проекта**

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.