Проверка фото по метадате на Tilda для promogram.pro
promogram.pro
Клиент обратился ко мне с особым требованием для своего веб-сайта на Tilda. Запрос заключался в том, чтобы убрать стандартные кнопки iOS при загрузке файлов в блоке BF502N, оставив только опцию «Снять фото или видео», чтобы промоутеры не могли редактировать фотографии. Также нужно было заменить текст в кнопке c "Загрузить файл" на "Сохранить настройку".
Из-за ограничений мобильной операционной системы прямое манипулирование диалоговым окном оказалось невозможным, поэтому для первой проблемы проблему я разработал альтернативное решение, основанное на анализе метаданных изображения.
Решение: Проверка временной метки на клиентской стороне
Реализованное решение включает следующие шаги:
Кастомизация кнопки загрузки
С помощью JavaScript, размещенного в блоке Tilda t123, название кнопки «Загрузить файл» во всплывающем окне динамически заменяется на «Сохранить настройку», чтобы лучше отражать предполагаемое действие пользователя.
Ограничение типа ввода и инициирование камеры
Другой фрагмент JavaScript динамически модифицирует элемент ввода файла в виджете загрузки. Он устанавливает атрибут accept в значение image/*, чтобы фильтровать только файлы изображений, и, что крайне важно, добавляет атрибут capture со значением environment. Этот атрибут на мобильных устройствах напрямую предлагает пользователю открыть приложение камеры устройства при нажатии на кнопку загрузки.
Проверка метаданных в режиме реального времени
Чтобы убедиться, что загруженная фотография действительно является свежим снимком, был реализован скрипт, использующий библиотеку exif-js. После выбора изображения:
- Скрипт считывает EXIF-метаданные загруженного файла для извлечения тегов «DateTimeOriginal» или «DateTime», которые представляют дату и время съемки фотографии.
- Извлеченная временная метка сравнивается с текущим временем.
- Если разница между временной меткой фотографии и текущим временем превышает небольшой порог (просьба заказчика сделать в задержку 5 минут), отображается предупреждающее сообщение с просьбой загрузить недавно сделанную фотографию, и поле выбора файла сбрасывается.
- Если временная метка находится в допустимом диапазоне, то дальнейшая отправка формы (активируемая кнопкой «Отправить») выполняется в соответствии с настройками блока BF502N, обеспечивая корректную передачу данных на Яндекс Диск, в CRM Tilda, Telegram и Nodul.
- Если метаданные изображения не содержат информации о времени съемки, пользователю предлагается сделать новый снимок.
Результат
Проверка метаданных обеспечила необходимый уровень проверки, гарантируя, что отправляются только недавно сделанные фотографии. Этот подход решил потребность клиента в получении свежих изображений в рамках ограничений платформы и мобильной операционной системы, сохранив функционал по передаче и обработке данных через блок BF502N. Замена текста также была проведена. Клиент остался доволен работой, что для меня самое важное.