Web Watermark Techniques: Visible, Dynamic, and Invisible Watermarks

Web watermark technology is widely used for information security and copyright protection, helping prevent data leakage and unauthorized use of digital content. Watermarks can be visible or invisible (blind), each serving different purposes.

Visible Watermarks

The simplest visible watermark is a semi‑transparent logo placed as a background image. This can be achieved with a single CSS rule:

background-image: url("./logo.png");

To tile the logo across the page, the background-repeat property (default repeat ) is used. For full‑page watermarks, a high‑z‑index div covering the entire viewport is created:

div.watermark{position:fixed;left:0;top:0;width:100vw;height:100vh;background-image:url("./logo.png");opacity:.5;z-index:3000;}

Because the overlay may block user interaction, the CSS property pointer-events:none makes the element "penetrable" so underlying page elements remain usable.

Dynamic Watermarks

When each user needs a unique watermark (e.g., containing username, UID, or phone number), the image must be generated on the fly. Two common approaches are:

Server‑side generation: the client requests an image with user data, the server returns a dynamically created PNG.

Client‑side Canvas generation: HTML5 Canvas draws the watermark text, rotates it, and exports a data URI for use as a background image.

const canvasElement = document.createElement('canvas');
const context = canvasElement.getContext('2d');
canvasElement.width = 200;
canvasElement.height = 200;
context.rotate((-30 * Math.PI) / 180);
context.font = '400 26px Arial';
context.fillStyle = '#B9C0CA';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('水印文字', 70, 130);
const watermark = canvasElement.toDataURL('image/png');

This method avoids extra server requests and works in modern browsers.

SVG Watermarks

For pure‑text watermarks without generating raster images, SVG can be used as a background-image . An SVG snippet can be encoded in Base64 and applied via CSS:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="50%" y="50%" font-size="30" fill="#a2a9b6" fill-opacity="0.3" font-family="system-ui, sans-serif" text-anchor="middle" dominant-baseline="middle" transform='rotate(-45, 100 100)'>水印文字</text>
</svg>

background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1zaXplPSIzMCIgZmlsbD0iI2EyYTliNiIgZmlsbC1vcGFjaXR5PSIwLjMiIGZvbnQtZmFtaWx5PSJzeXN0ZW0tdWksIHNhbnMtc2VyaWYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRyYW5zZm9ybT0ncm90YXRlKC00NSwgMTAwIDEwMCknPuawtOWNsOaWh

Invisible (Blind) Watermarks

Blind watermarks are hidden marks that can be extracted later for traceability. They offer better visual quality, concealment, and resistance to tampering compared with visible marks. Traditional image‑based blind watermarks are more mature than DOM‑based web approaches.

Common image‑domain techniques include:

LSB (Least Significant Bit) watermarking, which replaces the lowest bit of each pixel with watermark data. This method is simple but has low robustness.

Frequency‑domain watermarking, which embeds data into the middle‑frequency components after applying a Discrete Fourier Transform (DFT). This approach provides stronger resistance to attacks such as cropping or resampling.

Frequency‑domain watermarking workflow: transform the image to the frequency domain, embed the watermark text, then apply the inverse transform to obtain the watermarked image.

Security Enhancements

Visible watermarks implemented via DOM can be removed or altered using browser extensions or injected JavaScript/CSS. To protect the watermark, it can be encapsulated in a Shadow DOM, isolating it from external scripts.

Creating a Shadow DOM is done with Element.attachShadow({mode:'closed'}) :

Element.attachShadow({mode:'closed'});

Because styles inside Shadow DOM are scoped, the watermark element is hidden from outside interference. Additionally, a MutationObserver can monitor the watermark DOM node and automatically restore it if it is modified or removed.

// Example of using MutationObserver to watch the watermark element
const observer = new MutationObserver((mutations) => {
  // Re‑insert watermark if it disappears
});
observer.observe(document.body, { childList: true, subtree: true });

By combining Shadow DOM isolation with MutationObserver monitoring, the watermark becomes more resilient against tampering.

References

Web Components and Shadow DOM

Canvas API for dynamic image generation

SVG as background images

Digital image steganography literature

Fourier transform based frequency‑domain watermarking