Image Watermarker

Introduction:

An image watermark is most useful when ownership, review status, or source attribution needs to remain visible after a picture leaves its original folder. A copyright line can identify a photographer, a studio logo can keep a proof tied to a brand, and a repeated mark can make an unapproved preview harder to reuse unnoticed. None of these acts as access control: a watermark may still be cropped, painted over, or removed by someone who has a clean copy.

Text and logo marks suit different jobs. Text is quick to change for a client name, date, or proof status, while a transparent logo keeps established branding intact. The source image still carries the visual burden, so a mark that works on one photo may disappear over another. Size, opacity, color, and position must be judged against light areas, dark areas, and detailed textures rather than against an empty background.

Coverage changes both visibility and disruption:

• One corner or edge mark leaves most of the image unobstructed and works well for attribution, but it is usually easier to crop away.
• One central mark is harder to remove without affecting the subject, though it can interfere with faces, products, captions, or fine detail.
• A repeated grid protects more of the frame and suits proof copies, but dense spacing or high opacity can make the image difficult to review.

The output format matters independently of the visible mark. PNG preserves transparency and uses lossless encoding. JPEG has no alpha channel, so transparent pixels need a solid background, and both JPEG and WebP may trade detail for smaller files. Re-encoding also commonly removes camera metadata, embedded thumbnails, and animation frames. Keep the original file as the archival copy and treat the watermarked result as a separate publishing asset.

A visible watermark can support attribution or discourage casual reuse, but it does not prove authorship by itself. Contracts, registration records, source files, and publication history carry different kinds of evidence. The mark should be accurate, legible, and proportionate to the way the image will be shared.

How to Use This Tool:

Choose the source set first because one watermark design and one set of placement settings will be applied to every selected image.

1. Add the source images. Browse, drop, or paste up to ten PNG, JPEG, or WebP files. Each file may be up to 10 MiB and the selection may total up to 40 MiB. If the source area rejects the set, remove the unsupported, empty, oversized, or excess file before continuing.
2. Choose the mark. Select Text watermark for a label of up to 120 characters and choose a six-digit hexadecimal color. Select Logo image for one PNG, JPEG, or WebP logo up to 5 MiB; a transparent PNG or WebP usually blends most cleanly with the source.
3. Set coverage and output. Use Single placement with one of the nine anchors for attribution, or Repeat across image for a tiled proof. Adjust Relative size and Opacity, then choose whether to keep each source format or convert the whole set to PNG, JPEG, or WebP. Open Advanced only when rotation, repeat spacing, edge margin, or lossy quality needs changing.
4. Apply and inspect the watermark. Review every generated preview at a useful zoom, especially where the mark crosses bright, dark, or busy content. Check the receipt when dimensions, format, byte size, coverage, or the generated-file hash matters. If any setting changes after processing, apply the watermark again before downloading so the outputs match the current choices.

Interpreting Results:

The preview is the decisive check for legibility and obstruction. Text receives a contrasting black or white outline, but that cannot guarantee readable contrast across every pixel. Logo marks do not receive that outline, so inspect transparent edges and brand colors particularly carefully.

• Output width and height should match the decoded source dimensions. Matching dimensions confirm the canvas size, not that source metadata or compressed detail survived.
• A single-placement result should report one mark. A repeated result reports every planned draw, including marks that begin outside the canvas and are clipped at an edge to avoid uncovered borders.
• The SHA-256 value identifies the exact generated bytes. A different format, quality, browser encoder, or watermark setting produces a different value; the hash is not proof of copyright ownership.
• Before publishing, compare fine detail in JPEG or WebP output and confirm that any former transparent area looks correct in JPEG's white background.

Technical Details:

Watermark composition keeps the source canvas width and height unchanged. The mark is scaled from the shorter image edge, centered on its placement point, rotated around its own center, and blended over the source with the selected opacity. Using the shorter edge makes a batch feel more consistent across portrait and landscape images than a fixed pixel size would.

Formula Core:

Let W and H be source width and height in pixels, w and h the scaled mark dimensions, r the selected relative size as a decimal, and θ the rotation angle. The shared reference length and rotated bounding box are:

For a logo with original dimensions W_logo by H_logo, scaling preserves its aspect ratio and caps both dimensions at 82% of the source:

Text begins with a bold font size of $\max (8,s\cdot r)$ pixels. If the measured line is wider than 82% of the source width, the font is reduced proportionally. Opacity is converted from percent to the blend ratio $\alpha =p_{\text{opacity}}/100$.

Single-placement anchors use the rotated bounds when calculating their inset. If M is the edge margin in pixels, the horizontal start, center, and end coordinates are $M+b_x/2$, $W/2$, and $W-M-b_x/2$. The vertical coordinates use the same rule with H and b_y, where $M=s\cdot p_{\text{margin}}/100$. The unrotated mark is checked against the source, but its rotated footprint is not checked again; a very large diagonal mark can therefore cross an edge and should be caught in the preview.

Repeat coverage starts one rotated mark width and height outside the top-left edge. With gap $G=s\cdot p_{\text{spacing}}/100$, the grid steps are $b_x+G$ horizontally and $b_y+G$ vertically. Extra rows and columns extend beyond the far edges so clipping does not leave an uncovered strip. The exact draw count is:

A 1000 by 500 image with a 200 by 50 unrotated mark and 20% repeat spacing has a 100 px gap. Its steps are 300 px by 150 px, producing 6 columns and 5 rows, or 30 planned placements. Geometry is retained to six decimal places; encoded image dimensions remain whole source pixels.

Transformation Core:

Rule Core:

Privacy and Output Notes:

Source images and logo pixels are processed in the current browser tab and are not uploaded. Originals are never overwritten. Optional archive and chart downloads may need supporting browser code to load over the network, but the selected images remain local.

• Canvas export removes EXIF, embedded thumbnails, animation frames, and other source metadata. Do not rely on a watermarked copy as a metadata-preserving archive.
• JPEG output fills transparent areas with white and cannot restore alpha later. Choose PNG or WebP when transparency must remain.
• JPEG and WebP quality settings are encoder hints. File size and fine-detail loss can vary by browser, so compare the actual downloaded output before publication.

Worked Examples:

References:

• CanvasRenderingContext2D, MDN Web Docs.
• How to add a text overlay with ImageMagick, Simplified Guide.