 |
Resumen | Añade automáticamente marcas de agua a las imágenes subidas por los usuarios |
 |
Repositorio | GitHub - Arkshine/discourse-watermark-image · GitHub |
 |
Guía de instalación | Cómo instalar un tema o componente de tema |
 |
¿Nuevo en los temas de Discourse? | Guía para principiantes sobre el uso de temas en Discourse |
Instalar este componente de tema
Descripción
Este componente de tema añade automáticamente marcas de agua a las imágenes subidas por los usuarios. Puedes utilizar tanto una imagen como un código QR como marca de agua, con amplias opciones de personalización para la posición, apariencia y patrones de distribución.
El componente ofrece un control granular a través de configuraciones por categoría y grupo de usuarios, lo que te permite adaptar el comportamiento de la marca de agua a las necesidades de tu comunidad.
Por favor, revisa la sección Notas importantes antes de implementarlo.
Características
- Procesamiento de alto rendimiento utilizando WebAssembly y Web Workers
- Soporte integral para formatos de imagen (PNG, JPEG, BMP, ICO, TIFF, WEBP)
- Generación dinámica de marcas de agua en código QR
- Opciones de tamaño flexibles (relativo o absoluto)
- Sistema de posicionamiento versátil
- Personalización avanzada de la apariencia (opacidad, rotación, escala, margen, etc.)
- Múltiples modos de fusión
- Opciones de distribución de patrones (único, cuadrícula, diagonal, aleatorio)
- Configuraciones específicas por categoría y grupo de usuarios
- Vista previa en tiempo real en el panel de configuración
Configuración
| Configuración | Descripción |
|---|---|
image |
La imagen a utilizar como marca de agua. Formatos admitidos: PNG, JPEG, BMP, ICO, TIFF, WEBP. Valor predeterminado: "" |
size_mode |
Cómo se calcula el tamaño de la marca de agua: - relative: El tamaño es relativo al ancho de la imagen de destino.- absolute: Se aplica en su tamaño original.Valor predeterminado: "relative" |
relative_width |
El ancho de la marca de agua relativo al ancho de la imagen de destino (en %). Solo se aplica cuando el modo de tamaño de la marca de agua está establecido en relative.Rango: 1-100 Valor predeterminado: 10 |
absolute_scale |
Factor de escala para el tamaño original de la marca de agua (solo se usa en modo absoluto). Mínimo: 0.01 Valor predeterminado: 1 |
max_size |
Tamaño máximo como porcentaje de las dimensiones de la imagen. Rango: 1-100 Valor predeterminado: 50 |
position |
Posición de la marca de agua: top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-rightValor predeterminado: "bottom-right" |
margin_x |
Margen horizontal desde el borde (en % de la imagen de destino) Valor predeterminado: 0 |
margin_y |
Margen vertical desde el borde (en % de la imagen de destino) Valor predeterminado: 0 |
opacity |
Opacidad de la marca de agua. Rango: 1-100 Valor predeterminado: 100 |
rotate |
Ángulo de rotación. Rango: -360 a 360 grados Valor predeterminado: 0 |
blend_mode |
Cómo se fusiona la marca de agua con la imagen: normal, overlay, over, atop, xor, plus, multiply, burn, difference, soft_light, screen, hard_light, dodge, exclusion, lighten, darken. Valor predeterminado: "normal" |
pattern |
Patrón de repetición de la marca de agua: single, grid, diagonal, randomValor predeterminado: "single" |
pattern_allow_partial |
Permitir marcas de agua parciales en los bordes de la imagen Valor predeterminado: true |
pattern_max_count |
Número máximo de repeticiones de la marca de agua (0 para infinito) Valor predeterminado: 50 |
pattern_spacing |
Espaciado entre marcas de agua repetidas (en % de la imagen de destino) Valor predeterminado: 15 |
qrcode_enabled |
Habilitar marca de agua en código QR Valor predeterminado: false |
qrcode_text |
Texto a codificar en el código QR. Admite marcadores de posición: {homepage}, {username}, {topic_url}Valor predeterminado: "" |
qrcode_color |
Color del código QR (hex o variable CSS) Valor predeterminado: "var(--primary)" |
qrcode_background_color |
Color de fondo del código QR (hex o variable CSS) Valor predeterminado: "var(--secondary)" |
qrcode_quiet_zone |
Ancho del borde de espacio en blanco alrededor del código QR (0-10 módulos) Valor predeterminado: 2 |
qrcode_error_correction |
Nivel de corrección de errores: Low (~7%), Medium (~15%), Quarter (~25%), High (~30%)Más información sobre los niveles de corrección de errores se puede encontrar aquí. Valor predeterminado: "Medium" |
categories |
Categorías donde se debe aplicar la marca de agua. Valor predeterminado: "" |
groups |
Grupos a los que se debe aplicar la marca de agua. Valor predeterminado: "0" |
skip_small_images |
Omitir la marca de agua si la imagen está por debajo de min_image_dimensions.Valor predeterminado: false |
min_image_dimensions |
Dimensiones mínimas requeridas (ancho x alto) Valor predeterminado: "200x200" |
allow_non_supported_uploads |
Permitir que las subidas de imágenes continúen incluso si el formato no es compatible Valor predeterminado: false |
Tipos de marca de agua
Imagen
El componente admite múltiples formatos de imagen: PNG, JPEG, BMP, ICO, TIFF y WEBP.
Consulta la sección de preguntas frecuentes para obtener información importante sobre las limitaciones de soporte de formatos.
Código QR
Genera códigos QR dinámicos con contenido personalizable utilizando estas variables:
{homepage}- La URL de la página de inicio{username}- El nombre de usuario del usuario{topic_url}- La URL del tema
Importante: Al diseñar marcas de agua en código QR, considera el contraste y el tamaño. Las relaciones de contraste deficientes o un estilo excesivo pueden hacer que los códigos QR sean ilegibles. Siempre prueba tus marcas de agua en código QR con aplicaciones de escaneo.
Vista previa en tiempo real
El panel de configuración incluye una función de vista previa en tiempo real, que te permite ver instantáneamente cómo afecta tu configuración de marca de agua a una imagen de muestra.
La ventana de vista previa ofrece varias funciones interactivas:
- Ventana de vista previa redimensionable y movible
- Opción para cargar una imagen de muestra aleatoria
- Soporte para subir tus propias imágenes de prueba desde tu dispositivo
En el escritorio, se abre automáticamente. También puedes abrirla desde el botón en la parte inferior de la página:
Notas importantes
-
Las imágenes originales no se conservan
Las marcas de agua se aplican antes de la subida al servidor y las imágenes originales no se retienen. Prueba exhaustivamente tu configuración de marca de agua antes de implementarla en producción. -
Si estás probando en el panel de administración, ten cuidado de no validar tu configuración inmediatamente. Recomiendo crear un grupo o una categoría para estar seguro.
Preguntas frecuentes
¿Por qué están limitados los formatos de imagen?
Aunque Discourse convierte todas las subidas a JPEG, esta marca de agua del TC ocurre antes de la subida en el formato original, utilizando bibliotecas específicas de procesamiento de imágenes. Aunque es posible la marca de agua después de la subida, requeriría múltiples ciclos de subida/descarga y afectaría la experiencia del compositor. Todavía estoy explorando mejoras en este flujo de trabajo.
¿Por qué no se admite la marca de agua de texto?
La marca de agua de texto requeriría opciones de configuración extensas (selección de fuentes, estilo, etc.) que serían difíciles de implementar de manera efectiva sin una interfaz dedicada. Las marcas de agua de imagen ofrecen más flexibilidad y se pueden crear utilizando herramientas de diseño existentes.
Hoja de ruta
Los planes de desarrollo futuro pueden incluir:
- Múltiples perfiles de marca de agua [1]
- Conservación de la imagen original [2]
- Marca de agua después de la subida
Créditos
Este componente de tema está impulsado por:
- Photon: Una biblioteca de procesamiento de imágenes WebAssembly
- QR Code Generator: Fork modificado con soporte WebAssembly.
La entrada de subida está parcialmente compatible con el tipo de configuración de objeto – no se puede hacer en un TC en este momento. ↩︎
Puede requerir desarrollo de plugins. ↩︎
