Skip to content

feat(watermark): configurable logo placement (corners + center) #4

Description

@peb-peb

Summary

The watermark is always stamped in the bottom-left corner. Add configurable placement so users can choose where the logo goes.

Current behaviour

src/lib/server/watermark.ts hardcodes bottom-left in watermarkToWebp:

const pad = Math.round(width * PADDING_RATIO);
const left = Math.max(0, Math.min(pad, width - overlay.width));
const top = Math.max(0, height - overlay.height - pad);

Proposed approach

  • Introduce a placement option, e.g. top-left | top-right | bottom-left | bottom-right | center.
  • Compute top/left from the chosen placement + existing PADDING_RATIO (keep bottom-left as the default).
  • Thread the option through the upload API (src/app/api/upload/route.ts) and, ideally, expose a selector in the UI (HomeUploader / Dropzone).
  • Validate the incoming value server-side; fall back to the default on anything unexpected.

Acceptance criteria

  • User can pick any of the supported positions and the watermark lands there with correct padding.
  • Default behaviour (bottom-left) is unchanged when no option is provided.

Related

  • Shares the watermark.ts surface with the dark/light logo variants issue — consider a single WatermarkOptions object for both.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions