Image Watermarker
Stamp text or logo watermarks onto images with full position control.
Image Watermarker stamps text or a logo onto a photo with full position control — the card title and description say exactly that: "Stamp text or logo watermarks onto images with full position control." Switch between "Text" and "Logo", dial font size, color, opacity, rotation, and margin, or upload a logo and set Logo Scale %, then pick one of nine presets from Top Left through Bottom Right.
Every setting change re-renders a "Live Preview" canvas, so what you see is what exports: the same canvas is written with toBlob when you click "Apply Watermark". Everything is local Canvas 2D drawing — no network, no AI, no watermark left by the tool itself on your output.
How it works
renderWatermark draws the base image onto a canvas, then layers either text (system-ui font, measureText for centering, ctx rotation and opacity) or a logo Image at the configured scale. Position comes from resolvePactCenter-style preset math with clamping so rotated bounds never clip off the edge; Margin % is relative to min(width, height).
A useEffect keyed on (file, settings) re-renders the live preview on every change. Export resolves the output MIME with resolveExportMime — Keep Original preserves JPEG/WebP source MIMEs (anything else becomes PNG) — and quality is honored for lossy formats. Defaults: text "© My Brand", 8% font size, bold white, bottom-right, 4% margin, 60% opacity.
How to use
- Drop an image (image/*) into the "Click or drag and drop to add image" zone.
- Toggle the watermark type between "Text" and "Logo".
- For text: type into "Watermark Text" (placeholder "Enter watermark text"), then adjust Font Size %, Bold, Color, Opacity (5–100%), Rotation (−180..180°), and Margin % (0–25%).
- For logo: click "Upload Logo" (JPG, PNG, WebP) and set Logo Scale % — it defaults to 20 when a logo is selected.
- Pick a position preset: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center, or Bottom Right.
- Choose Format (Keep Original, JPEG, PNG, WebP) and move the Quality slider when the output is lossy.
- Watch the "Live Preview" canvas update, then click "Apply Watermark" (label becomes "Applying watermark...").
- Download the result (shown as "{name} — {n} KB") or click "Start over".
Tips
- Opacity defaults to 60% — visible but non-destructive; drop it lower for subtle rights marks.
- Margin % is relative to the shorter image side, so larger margins keep marks away from edges on wide photos.
- Rotation applies to both text and logos; the bounds math prevents edge clipping for rotated marks.
- Keep Original preserves JPEG/WebP MIME — other source formats export as PNG, which preserves transparency.
- "Could not load logo." means the logo file failed to decode — re-export it as a clean JPG/PNG/WebP.
Image Watermarker FAQ
Can I watermark with a logo instead of text?
Yes — switch to the "Logo" toggle, upload a JPG, PNG, or WebP, and size it with Logo Scale %.
Does the preview match the download?
Yes — the same canvas that shows in Live Preview is exported via toBlob after Apply.
What positions are supported?
Nine presets: the four corners, the four edge centers, and true Center.
Is my image uploaded anywhere?
No — watermarking is local canvas drawing; nothing is sent over the network.
Why does the quality slider only appear sometimes?
It shows for JPEG/WebP outputs, or Keep Original when the source is already JPEG/WebP.
Credits
- Canvas 2D API — In-browser drawing of text/logo watermarks and export