 |
Resumo | Adiciona automaticamente marcas d’água a imagens enviadas pelos usuários |
 |
Repositório | GitHub - Arkshine/discourse-watermark-image · GitHub |
 |
Guia de Instalação | Como instalar um tema ou componente de tema |
 |
Novo em Temas do Discourse? | Guia para iniciantes no uso de Temas do Discourse |
Instale este componente de tema
Descrição
Este componente de tema adiciona automaticamente marcas d’água a imagens enviadas pelos usuários. Você pode usar uma imagem ou um código QR como marca d’água, com opções extensas de personalização para posição, aparência e padrões de distribuição.
O componente oferece controle granular por meio de configurações de categoria e grupo de usuários, permitindo ajustar o comportamento da marca d’água às necessidades da sua comunidade.
Por favor, revise a seção Notas Importantes antes da implementação.
Recursos
- Processamento de alto desempenho usando WebAssembly e Web Workers
- Suporte abrangente a formatos de imagem (PNG, JPEG, BMP, ICO, TIFF, WEBP)
- Geração dinâmica de marca d’água em código QR
- Opções flexíveis de dimensionamento (relativo ou absoluto)
- Sistema versátil de posicionamento
- Personalização avançada de aparência (opacidade, rotação, escala, margem, etc.)
- Múltiplos modos de mesclagem
- Opções de distribuição de padrão (único, grade, diagonal, aleatório)
- Configurações específicas por categoria e grupo de usuários
- Pré-visualização ao vivo no painel de configurações
Configurações
| Configuração | Descrição |
|---|---|
image |
A imagem a ser usada como marca d’água. Formatos suportados: PNG, JPEG, BMP, ICO, TIFF, WEBP. Padrão: "" |
size_mode |
Como o tamanho da marca d’água é calculado: - relative: O tamanho é relativo à largura da imagem de destino.- absolute: Aplicado no tamanho original.Padrão: "relative" |
relative_width |
A largura da marca d’água relativa à largura da imagem de destino (em %). Aplica-se apenas quando o modo de tamanho da marca d’água está definido como relative.Faixa: 1-100 Padrão: 10 |
absolute_scale |
Fator de escala para o tamanho original da marca d’água (usado apenas no modo absoluto). Mínimo: 0.01 Padrão: 1 |
max_size |
Tamanho máximo como porcentagem das dimensões da imagem. Faixa: 1-100 Padrão: 50 |
position |
Posição da marca d’água: top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-rightPadrão: "bottom-right" |
margin_x |
Margem horizontal da borda (em % da imagem de destino) Padrão: 0 |
margin_y |
Margem vertical da borda (em % da imagem de destino) Padrão: 0 |
opacity |
Opacidade da marca d’água. Faixa: 1-100 Padrão: 100 |
rotate |
Ângulo de rotação. Faixa: -360 a 360 graus Padrão: 0 |
blend_mode |
Como a marca d’água se mescla com a imagem: normal, overlay, over, atop, xor, plus, multiply, burn, difference, soft_light, screen, hard_light, dodge, exclusion, lighten, darken. Padrão: "normal" |
pattern |
Padrão de repetição da marca d’água: single, grid, diagonal, randomPadrão: "single" |
pattern_allow_partial |
Permitir marcas d’água parciais nas bordas da imagem Padrão: true |
pattern_max_count |
Número máximo de repetições da marca d’água (0 para infinito) Padrão: 50 |
pattern_spacing |
Espaçamento entre marcas d’água repetidas (em % da imagem de destino) Padrão: 15 |
qrcode_enabled |
Habilitar marca d’água em código QR Padrão: false |
qrcode_text |
Texto a ser codificado no código QR. Suporta placeholders: {homepage}, {username}, {topic_url}Padrão: "" |
qrcode_color |
Cor do código QR (hex ou variável CSS) Padrão: "var(--primary)" |
qrcode_background_color |
Cor de fundo do código QR (hex ou variável CSS) Padrão: "var(--secondary)" |
qrcode_quiet_zone |
Largura da borda de espaço em branco ao redor do código QR (0-10 módulos) Padrão: 2 |
qrcode_error_correction |
Nível de correção de erro: Low (~7%), Medium (~15%), Quarter (~25%), High (~30%)Mais informações sobre níveis de correção de erro podem ser encontradas aqui. Padrão: "Medium" |
categories |
Categorias onde a marca d’água deve ser aplicada. Padrão: "" |
groups |
Grupos aos quais a marca d’água deve ser aplicada. Padrão: "0" |
skip_small_images |
Pular a aplicação de marca d’água se a imagem estiver abaixo de min_image_dimensions.Padrão: false |
min_image_dimensions |
Dimensões mínimas necessárias (largura x altura) Padrão: "200x200" |
allow_non_supported_uploads |
Permitir que uploads de imagem continuem mesmo quando o formato não for suportado Padrão: false |
Tipos de Marca D’água
Imagem
O componente suporta múltiplos formatos de imagem: PNG, JPEG, BMP, ICO, TIFF e WEBP.
Consulte a seção de FAQ para informações importantes sobre limitações de suporte a formatos.
Código QR
Gere códigos QR dinâmicos com conteúdo personalizável usando estas variáveis:
{homepage}- A URL da página inicial{username}- O nome de usuário do usuário{topic_url}- A URL do tópico
Importante: Ao estilizar marcas d’água em código QR, considere o contraste e o dimensionamento. Contrastes pobres ou estilização excessiva podem tornar os códigos QR ilegíveis. Sempre teste suas marcas d’água em código QR com aplicativos de leitura.
Pré-visualização em Tempo Real
O painel de configurações inclui um recurso de pré-visualização em tempo real, permitindo que você veja como sua configuração de marca d’água afeta uma imagem de amostra instantaneamente.
A janela de pré-visualização oferece vários recursos interativos:
- Janela de pré-visualização redimensionável e movível
- Opção para carregar uma imagem de amostra aleatória
- Suporte para upload de suas próprias imagens de teste do seu dispositivo
No desktop, ela abre automaticamente. Você também pode abrir pelo botão na parte inferior da página:
Notas Importantes
-
Imagens Originais Não São Preservadas
As marcas d’água são aplicadas antes do upload no servidor, e as imagens originais não são retidas. Teste thoroughly suas configurações de marca d’água antes de implantar em produção. -
Se estiver testando no painel de administração, tenha cuidado para não validar suas configurações imediatamente. Recomendo criar um grupo ou uma categoria para garantir a segurança.
FAQ
Por que os formatos de imagem são limitados?
Embora o Discourse converta todos os uploads para JPEG, esta marca d’água do TC ocorre antes do upload no formato original, usando bibliotecas específicas de processamento de imagem. Embora a marca d’água após o upload seja possível, exigiria múltiplos ciclos de upload/download e afetaria a experiência do compositor. Ainda estou explorando melhorias para este fluxo de trabalho.
Por que a marca d’água em texto não é suportada?
A marca d’água em texto exigiria opções extensas de configuração (seleção de fonte, estilização, etc.) que seriam difíceis de implementar efetivamente sem uma interface dedicada. Marcas d’água em imagem oferecem mais flexibilidade e podem ser criadas usando ferramentas de design existentes.
Roadmap
Planos de desenvolvimento futuros podem incluir:
Créditos
Este componente de tema é impulsionado por:
- Photon: Uma biblioteca de processamento de imagem WebAssembly
- QR Code Generator: Fork modificado com suporte a WebAssembly.
O input de upload é parcialmente suportado com o Tipo de configuração de objeto – não pode ser feito em um TC no momento. ↩︎
Pode exigir desenvolvimento de plugin. ↩︎
