Ferramenta de Marca d'Água

A marca d’água de imagem aplica texto, logotipo ou outra imagem sobre uma foto para indicar autoria, origem, marca, status de uso ou contexto de publicação. Ela é comum em fotos de produto, portfólios, eventos, materiais de treinamento, posts sociais e prévias enviadas antes da aprovação final. O ponto crítico é o equilíbrio: a marca precisa ser visível o bastante para desestimular uso casual, mas não pode cobrir detalhes importantes, estragar o assunto ou deixar o resultado amador. Posição, opacidade, tamanho, repetição e rotação devem combinar com a imagem. O processamento local evita enviar o arquivo original.

A aplicação de marca d'água acontece inteiramente em um canvas 2D. A imagem de origem é desenhada em um HTMLCanvasElement em suas dimensões de pixel nativas por meio de ctx.drawImage, depois o texto ou logotipo é composto sobre ela usando ctx.fillText para strings e uma segunda chamada drawImage para sobreposições raster. A opacidade é controlada por ctx.globalAlpha, que multiplica sobre todos os canais alfa subsequentes; um globalAlpha de 0,5 contra um PNG 50% transparente resulta em 25% no pixel final, o que é a causa mais comum dos relatórios de bug 'por que minha marca d'água ficou invisível'. O posicionamento usa transformações padrão do canvas: ctx.translate move a origem para o âncora de posicionamento (superior esquerdo, superior direito, centro, inferior direito, ou cada célula de uma grade 3×3), ctx.rotate(angle) inclina um carimbo diagonal ao redor dessa origem, e a chamada draw posiciona a marca sem deslocamento adicional. Marcas d'água em mosaico chamam CanvasPattern.createPattern com a fonte rotacionada e ctx.fillRect por todo o canvas, que é como uma faixa DRAFT de página inteira mantém espaçamento uniforme independentemente das dimensões da fonte. As métricas de fonte vêm de ctx.measureText, que reporta pixels CSS, então um rótulo de 28 px que cabe na pré-visualização em um display 2x pode ser cortado em uma exportação mobile 1x. A etapa de exportação chama canvas.toBlob com 'image/png', 'image/jpeg' ou 'image/webp' e um parâmetro de qualidade opcional para os formatos com perda. O canvas roda na resolução da fonte, então a saída preserva as dimensões de pixel originais, mas não carrega a orientação EXIF, perfil ICC ou outros metadados da fonte. Lotes acima de ~30 arquivos grandes começam a bloquear a thread da UI porque toBlob é assíncrono, mas a pilha de desenho roda de forma síncrona na thread principal, razão pela qual uma carga pesada se beneficia de mover o trabalho do canvas para um Web Worker com OffscreenCanvas.

• Pilha de composição: ctx.drawImage para a base, ctx.fillText (ou um segundo drawImage) para a marca, ctx.globalAlpha para multiplicação de transparência.
• Matemática do alfa: globalAlpha multiplica sobre o alfa existente de cada pixel, então uma marca de 0,5 em um PNG com alfa de 0,5 renderiza como 0,25, não 0,5.
• Rotação: ctx.translate para o âncora, ctx.rotate(angle) em radianos, depois desenha na origem (0,0) para que a transformação permaneça centrada no ponto de posicionamento.
• Mosaico: createPattern retorna um CanvasPattern que fillRect pode pintar por todo o canvas, mantendo o espaçamento uniforme em qualquer dimensão da fonte.
• Métricas de texto: measureText reporta pixels CSS, então um rótulo dimensionado em uma pré-visualização x2 pode ultrapassar a borda da imagem em uma exportação mobile 1x; dimensione proporcionalmente a canvas.width quando em dúvida.
• Exportação: toBlob('image/png' | 'image/jpeg' | 'image/webp', quality) preserva a resolução da fonte, mas remove EXIF e ICC; rotacione com base na orientação EXIF antes do draw se a correção retrato/paisagem importar.