Herramienta de Marca de Agua

La marca de agua de imagen coloca texto, un logotipo u otra imagen sobre una foto para indicar autoría, fuente, marca, estado de uso o contexto de publicación. Se utiliza en fotos de producto, portafolios, eventos, material formativo, publicaciones sociales y vistas previas antes de una aprobación final. La dificultad está en el equilibrio: la marca debe verse lo suficiente para disuadir usos casuales, pero no tanto como para tapar detalles, estropear el motivo o dar una apariencia poco profesional. Posición, opacidad, tamaño, repetición y rotación deben adaptarse al tipo de imagen. El procesamiento local evita subir el archivo original.

El marcaje de agua ocurre completamente en un canvas 2D. La imagen fuente se dibuja en un HTMLCanvasElement a sus dimensiones de píxeles nativas mediante ctx.drawImage, luego se compone texto o un logotipo encima usando ctx.fillText para cadenas y una segunda llamada a drawImage para superposiciones raster. La opacidad se controla mediante ctx.globalAlpha, que se multiplica sobre cada canal alfa que le sigue; un globalAlpha de 0,5 contra un PNG al 50% de transparencia termina en 25% en el píxel final, que es la causa más común de los reportes de error '¿por qué mi marca de agua es invisible?'. El posicionamiento usa transformaciones estándar de canvas: ctx.translate mueve el origen al anclaje de colocación (superior izquierda, superior derecha, centro, inferior derecha, o cada celda de una cuadrícula 3×3), ctx.rotate(angle) inclina un sello diagonal alrededor de ese origen, y la llamada de dibujo coloca la marca sin más desplazamiento. Las marcas de agua en mosaico llaman a CanvasPattern.createPattern con la fuente rotada y ctx.fillRect por todo el canvas, que es cómo una franja DRAFT de página completa permanece uniformemente espaciada independientemente de las dimensiones de origen. Las métricas de fuente provienen de ctx.measureText, que reporta píxeles CSS, por lo que una etiqueta de 28 px que cabe en la vista previa en una pantalla 2x puede recortarse en una exportación móvil 1x. El paso de exportación llama a canvas.toBlob con 'image/png', 'image/jpeg' o 'image/webp' y un parámetro de calidad opcional para los formatos con pérdida. El canvas se ejecuta a la resolución de origen, por lo que la salida preserva las dimensiones de píxeles originales pero no lleva la orientación EXIF de origen, el perfil ICC ni otros metadatos. Lotes de más de ~30 archivos grandes comienzan a bloquear el hilo de UI porque toBlob es asíncrono pero la pila de dibujo se ejecuta de forma síncrona en el hilo principal, razón por la cual una carga pesada se beneficia de mover el trabajo del canvas a un Web Worker con OffscreenCanvas.

• Pila de composición: ctx.drawImage para la base, ctx.fillText (o un segundo drawImage) para la marca, ctx.globalAlpha para la multiplicación de transparencia.
• Matemática de alfa: globalAlpha se multiplica sobre el alfa existente de cada píxel, por lo que una marca de 0,5 sobre un PNG con alfa de 0,5 se renderiza como 0,25, no 0,5.
• Rotación: ctx.translate al anclaje, ctx.rotate(angle) en radianes, luego dibujar en el origen (0,0) para que la transformación permanezca centrada en el punto de colocación.
• Mosaico: createPattern devuelve un CanvasPattern que fillRect puede pintar por todo el canvas, manteniendo el espaciado uniforme en cualquier dimensión de origen.
• Métricas de texto: measureText reporta píxeles CSS, por lo que una etiqueta dimensionada en una vista previa x2 puede desbordar el borde de la imagen en una exportación móvil 1x; dimensionar proporcionalmente a canvas.width en caso de duda.
• Exportación: toBlob('image/png' | 'image/jpeg' | 'image/webp', quality) preserva la resolución de origen pero elimina EXIF e ICC; rotar según la orientación EXIF antes de dibujar si la corrección de retrato/paisaje es importante.