 |
Краткое описание | Автоматически добавляет водяные знаки к загружаемым пользователями изображениям |
 |
Репозиторий | GitHub - Arkshine/discourse-watermark-image · GitHub |
 |
Руководство по установке | Как установить тему или компонент темы |
 |
Новичок в темах Discourse? | Начинающий путеводитель по использованию тем Discourse |
Установить этот компонент темы
Описание
Этот компонент темы автоматически добавляет водяные знаки к загружаемым пользователями изображениям. Вы можете использовать в качестве водяного знака либо изображение, либо QR-код, с широкими возможностями настройки положения, внешнего вида и паттернов распределения.
Компонент обеспечивает детальное управление через настройки категорий и групп пользователей, позволяя адаптировать поведение нанесения водяных знаков под потребности вашего сообщества.
Пожалуйста, ознакомьтесь с разделом Важные замечания перед внедрением.
Возможности
- Высокопроизводительная обработка с использованием WebAssembly и Web Workers
- Полная поддержка форматов изображений (PNG, JPEG, BMP, ICO, TIFF, WEBP)
- Динамическая генерация водяных знаков в виде QR-кодов
- Гибкие варианты размера (относительный или абсолютный)
- Универсальная система позиционирования
- Расширенная настройка внешнего вида (прозрачность, поворот, масштаб, отступы и т.д.)
- Множество режимов наложения
- Варианты распределения паттернов (одиночный, сетка, диагональ, случайный)
- Настройки, специфичные для категорий и групп пользователей
- Живой предпросмотр в панели настроек
Настройки
| Настройка | Описание |
|---|---|
image |
Изображение для использования в качестве водяного знака. Поддерживаемые форматы: PNG, JPEG, BMP, ICO, TIFF, WEBP. По умолчанию: "" |
size_mode |
Как рассчитывается размер водяного знака: - relative: Размер относительный ширине целевого изображения.- absolute: Применяется в исходном размере.По умолчанию: "relative" |
relative_width |
Ширина водяного знака относительно ширины целевого изображения (в %). Применяется только когда режим размера водяного знака установлен в relative.Диапазон: 1-100 По умолчанию: 10 |
absolute_scale |
Коэффициент масштабирования для исходного размера водяного знака (используется только в абсолютном режиме). Мин: 0.01 По умолчанию: 1 |
max_size |
Максимальный размер в процентах от размеров изображения. Диапазон: 1-100 По умолчанию: 50 |
position |
Положение водяного знака: top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-rightПо умолчанию: "bottom-right" |
margin_x |
Горизонтальный отступ от края (в % от целевого изображения) По умолчанию: 0 |
margin_y |
Вертикальный отступ от края (в % от целевого изображения) По умолчанию: 0 |
opacity |
Прозрачность водяного знака. Диапазон: 1-100 По умолчанию: 100 |
rotate |
Угол поворота. Диапазон: от -360 до 360 градусов По умолчанию: 0 |
blend_mode |
Как водяной знак накладывается на изображение: normal, overlay, over, atop, xor, plus, multiply, burn, difference, soft_light, screen, hard_light, dodge, exclusion, lighten, darken. По умолчанию: "normal" |
pattern |
Паттерн повторения водяного знака: single, grid, diagonal, randomПо умолчанию: "single" |
pattern_allow_partial |
Разрешать частичные водяные знаки на краях изображения По умолчанию: true |
pattern_max_count |
Максимальное количество повторений водяного знака (0 для бесконечного) По умолчанию: 50 |
pattern_spacing |
Расстояние между повторяющимися водяными знаками (в % от целевого изображения) По умолчанию: 15 |
qrcode_enabled |
Включить водяной знак в виде QR-кода По умолчанию: false |
qrcode_text |
Текст для кодирования в QR-коде. Поддерживает плейсхолдеры: {homepage}, {username}, {topic_url}По умолчанию: "" |
qrcode_color |
Цвет QR-кода (hex или CSS-переменная) По умолчанию: "var(--primary)" |
qrcode_background_color |
Цвет фона QR-кода (hex или CSS-переменная) По умолчанию: "var(--secondary)" |
qrcode_quiet_zone |
Ширина белой границы вокруг QR-кода (0-10 модулей) По умолчанию: 2 |
qrcode_error_correction |
Уровень коррекции ошибок: Low (~7%), Medium (~15%), Quarter (~25%), High (~30%)Более подробную информацию об уровнях коррекции ошибок можно найти здесь По умолчанию: "Medium" |
categories |
Категории, к которым следует применять водяной знак. По умолчанию: "" |
groups |
Группы, к которым следует применять водяной знак. По умолчанию: "0" |
skip_small_images |
Пропускать нанесение водяного знака, если изображение меньше min_image_dimensions.По умолчанию: false |
min_image_dimensions |
Минимально требуемые размеры (ширина x высота) По умолчанию: "200x200" |
allow_non_supported_uploads |
Разрешать загрузку изображений, даже если формат не поддерживается По умолчанию: false |
Типы водяных знаков
Изображение
Компонент поддерживает несколько форматов изображений: PNG, JPEG, BMP, ICO, TIFF и WEBP.
Смотрите раздел FAQ для важной информации об ограничениях поддержки форматов.
QR-код
Генерируйте динамические QR-коды с настраиваемым содержимым, используя следующие переменные:
{homepage}- URL главной страницы{username}- Имя пользователя{topic_url}- URL темы
Важно: При стилизации водяных знаков в виде QR-кодов учитывайте контрастность и размеры. Низкие коэффициенты контрастности или чрезмерная стилизация могут сделать QR-коды нечитаемыми. Всегда тестируйте свои водяные знаки QR-кодов с помощью приложений для сканирования.
Предпросмотр в реальном времени
Панель настроек включает функцию предпросмотра в реальном времени, позволяющую мгновенно увидеть, как ваша конфигурация водяного знака влияет на пример изображения.
Окно предпросмотра предлагает несколько интерактивных функций:
- Изменяемое по размеру и перемещаемое окно предпросмотра
- Возможность загрузки случайного примера изображения
- Поддержка загрузки ваших собственных тестовых изображений с вашего устройства
На рабочем столе он открывается автоматически. Вы также можете открыть его по кнопке в нижней части страницы:
Важные замечания
-
Оригинальные изображения не сохраняются
Водяные знаки применяются перед загрузкой на сервер, и оригинальные изображения не сохраняются. Тщательно протестируйте настройки водяных знаков перед развертыванием в продакшн. -
Если тестируете в панели администратора, будьте осторожны и не применяйте настройки сразу. Рекомендуется создать группу или категорию для безопасности.
Часто задаваемые вопросы (FAQ)
Почему форматы изображений ограничены?
Хотя Discourse конвертирует все загрузки в JPEG, эта тема компонента (TC) применяет водяные знаки до загрузки в исходном формате, используя специфические библиотеки обработки изображений. Хотя нанесение водяных знаков после загрузки возможно, это потребовало бы множества циклов загрузки/выгрузки и повлияло бы на опыт работы с редактором. Я все еще исследую улучшения этого рабочего процесса.
Почему не поддерживается текстовое нанесение водяных знаков?
Текстовое нанесение водяных знаков потребовало бы обширных опций конфигурации (выбор шрифта, стилизация и т.д.), которые было бы трудно эффективно реализовать без специального интерфейса. Водяные знаки в виде изображений обеспечивают большую гибкость и могут быть созданы с помощью существующих инструментов дизайна.
Дорожная карта
Планы на будущее могут включать:
- Несколько профилей водяных знаков [1]
- Сохранение оригинальных изображений [2]
- Нанесение водяных знаков после загрузки
Благодарности
Этот компонент темы работает на базе:
- Photon: Библиотека обработки изображений на WebAssembly
- QR Code Generator: Модифицированный форк с поддержкой WebAssembly.
Ввод загрузки частично поддерживается с типом настроек объектов – на данный момент это невозможно сделать в TC. ↩︎
Может потребовать разработки плагина. ↩︎
