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

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions