Advanced Watermark Techniques and OCR Integration for Front-End Applications

Watermarks are widely used in internal platforms and back‑office systems to protect sensitive data. A semi‑transparent text watermark (often a user name or ID) is added to key data display areas to deter screenshots and to quickly identify the source of any leak.

The article explores the evolution of watermark technology and introduces a series of security‑enhanced watermark schemes (V1‑V5) that address common weaknesses such as deletion, invisibility, covering, and perception.

V1 – Basic Canvas Watermark

The basic implementation draws watermark text on a canvas, converts it to an image, and tiles it as a background. This simple approach is vulnerable because the div containing the watermark can be removed via the browser console.

V2 – Deletion‑Resistant Watermark

To prevent removal, a MutationObserver is used to monitor the DOM. When the watermark element is deleted, the observer restores it automatically.

V3 – Hide‑Resistant Watermark

In addition to node removal, an attacker can set the watermark element’s style (e.g., opacity 0) to make it invisible. The same MutationObserver watches attribute changes and resets the style when it is altered.

V4 – Cover‑Resistant Watermark

Even if the watermark element remains, a higher‑z‑index content layer can cover it. The solution monitors the z-index of other elements and forces the watermark’s layer to stay on top, using the maximum integer value as a safeguard.

V5 – Perception‑Resistant (Dark) Watermark

Dark watermarks are rendered with extremely low opacity so they are invisible to the human eye but can be extracted later. By manipulating RGBA channels (e.g., clearing two channels and keeping one), the hidden information can be recovered when needed.

Dark Watermark Decoding

Three decoding methods are compared: color‑channel masking, image binarization, and a mixed‑mode layer‑mask technique. The mixed‑mode approach (using canvas globalCompositeOperation='overlay' ) provides the most reliable results across varied backgrounds.

Adaptive Tone Handling

For bright backgrounds, a black overlay works; for dark backgrounds, a white overlay is required. The implementation allows users to select the appropriate tone manually, with future plans for automatic detection.

Contrast Adjustment

The number of overlay layers can be tuned (default 4, range 1‑8) to balance visibility and background interference.

OCR Accuracy Improvement

The overall screenshot‑search workflow consists of two core modules: the dark‑watermark parsing module and the OCR module. Enhancements focus on reducing background noise, limiting image size, and selecting the most accurate OCR engine.

Three OCR solutions are evaluated:

Local tesseract.js – free and front‑end only but lower accuracy.

Feishu OCR API – high accuracy but requires business negotiations and may incur costs.

Internal company OCR service – stable, fast, and supports region‑based recognition.

The final choice combines the internal OCR service as the primary engine with tesseract.js as a fallback.

Region Selection

To further reduce noise, users can crop the screenshot to a region of interest using react-image-crop . Only the selected area is sent to OCR, dramatically improving speed and precision.

Overall, the article demonstrates a comprehensive, front‑end‑centric approach to building robust, invisible watermarks and integrating OCR for reliable data tracing and debugging.