Расширенная работа с изображениями
Расширенные функции работы с изображениями в rtSurvey: водяные знаки, отображение медиасетки и аннотации изображений.
Помимо стандартного типа вопроса image, rtSurvey предоставляет расширения для нанесения водяных знаков на захваченные фотографии и отображения нескольких изображений в виде медиасетки. Это полезно для опросов, основанных на доказательствах, где фотографии должны быть помечены идентификатором перечислителя или метаданными опроса.
Водяной знак
Функция водяного знака накладывает текст или изображение на захваченную фотографию перед её сохранением. Это используется для маркировки полевых фотографий датой, именем перечислителя, GPS-координатами или любыми другими данными опроса — что затрудняет выдачу ранее снятых фотографий за свежезахваченные доказательства.
Настройка
Используйте watermark() в столбце calculation поля image в сочетании с внешним видом callapi:
watermark(type, size, distance, color, shadow, rotate, blur)
| Параметр | Описание |
|---|---|
type | 'text' для текстового водяного знака; 'file' для водяного знака в виде изображения |
size | Размер шрифта в пикселях (текст) или размер водяного знака в % ширины изображения (файл) |
distance | Расстояние между повторяющимися плитками водяного знака (в пикселях) |
color | Цвет текста (CSS-цвет или hex). Не используется для типа file |
shadow | Цвет тени (CSS-цвет или hex) |
rotate | Угол поворота в градусах (например, 45 для диагонального) |
blur | Непрозрачность водяного знака (0 = невидимый, 100 = полностью непрозрачный) |
Пример текстового водяного знака
Наложение имени перечислителя и сегодняшней даты по диагонали на каждую захваченную фотографию:
| type | name | label | appearance | calculation |
|---|---|---|---|---|
| calculate | wm_text | `concat(pulldata(‘app-api’, ‘user.name’), ' | ||
| image | site_photo | Сфотографируйте место | watermark | watermark('text', 20, 60, '#ffffff', '#000000', 45, 40) |
Текст водяного знака берётся из ${wm_text}. Устанавливайте поле с текстом водяного знака перед полем изображения в форме.
Пример водяного знака в виде изображения/логотипа
Наложение логотипа организации (прикреплённого как медиафайл с именем logo.png):
| type | name | label | appearance | calculation |
|---|---|---|---|---|
| image | evidence_photo | Сфотографируйте доказательство | watermark | watermark('file', 25, 80, '', '#000000', 0, 50) |
Отмена/повтор
Редактор водяного знака поддерживает отмену и повтор — перечислители могут вернуться к предыдущим состояниям редактирования перед подтверждением фотографии.
Мозаичное размещение водяного знака
Водяной знак автоматически повторяется (мозаично) по всему изображению. Параметр distance управляет расстоянием между плитками; rotate управляет углом каждой плитки.
Виджет медиасетки
Виджет медиасетки отображает коллекцию медиафайлов (изображения, аудио, видео) в сетчатом макете, позволяя проверяющим или перечислителям визуально просматривать захваченные файлы.
Этот виджет активируется внешним видом mediagridwidget и обычно используется в полях note или calculate для отображения ранее захваченных медиафайлов из группы повторений.
Пример: Отображение всех фотографий из повторения в виде сетки
| type | name | label | appearance | calculation |
|---|---|---|---|---|
| calculate | photo_list | join(' ', ${site_photo}) | ||
| note | photo_review | Просмотр захваченных фотографий | mediagridwidget |
Лучшие практики для фотографий с водяными знаками
- Всегда вычисляйте текст водяного знака в поле
calculateвыше поля изображения, чтобы он был доступен при съёмке. - Используйте угол поворота (например, 45°), чтобы водяные знаки было сложнее обрезать.
- Устанавливайте непрозрачность (
blur) от 30 до 60% — достаточно высокой для читаемости, но достаточно низкой, чтобы не закрывать объект фотографии. - Включайте имя перечислителя, дату и GPS-координаты в текст водяного знака для максимальной ценности аудита.
- Тестируйте отображение водяного знака на устройствах с наименьшими характеристиками в вашем парке — наложение водяных знаков на основе Canvas может быть медленным на старом оборудовании.
Ограничения
- Наложение водяных знаков выполняется на стороне клиента с использованием HTML5 Canvas API — требует современного браузера или мобильного WebView.
- Фотографии с очень высоким разрешением могут обрабатываться несколько секунд на устройствах низкого класса.
- Водяные знаки встраиваются в файл изображения — их нельзя удалить после отправки без редактирования изображения.
- Тип водяного знака
fileтребует прикрепления изображения логотипа как медиафайла с точно соответствующим именем файла.