From 398863aaf41873e98ea9d6ebca91137a596c7aed Mon Sep 17 00:00:00 2001
From: Dun Lu <52928534+alonely-boy@users.noreply.github.com>
Date: Thu, 6 Nov 2025 03:24:56 +0100
Subject: [PATCH] fix(components): [watermark] use baselineOffset to get a
 complete canvas (#22670)

* fix(components): [watermark] use baselineOffset to get a complete canvas

* fix(components): [watermark] prevent unnecessary baselineOffset process
---
 packages/components/watermark/src/useClips.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/components/watermark/src/useClips.ts b/packages/components/watermark/src/useClips.ts
index aaaa6e5c40..53a98e42bf 100644
--- a/packages/components/watermark/src/useClips.ts
+++ b/packages/components/watermark/src/useClips.ts
@@ -55,7 +55,7 @@ export default function useClips() {
       height,
       ratio
     )
-
+    let baselineOffset = 0
     if (content instanceof HTMLImageElement) {
       // Image
       ctx.drawImage(content, 0, 0, contentWidth, contentHeight)
@@ -77,6 +77,14 @@ export default function useClips() {
       ctx.textAlign = textAlign
       ctx.textBaseline = textBaseline
       const contents = isArray(content) ? content : [content]
+      if (contents[0]) {
+        const argumentMetrics = ctx.measureText(contents[0])
+        ctx.textBaseline = 'top'
+        const topMetrics = ctx.measureText(contents[0])
+        baselineOffset =
+          argumentMetrics.actualBoundingBoxAscent -
+          topMetrics.actualBoundingBoxAscent
+      }
       contents?.forEach((item, index) => {
         const [alignRatio, spaceRatio] = TEXT_ALIGN_RATIO_MAP[textAlign]
         ctx.fillText(
@@ -148,7 +156,7 @@ export default function useClips() {
         cutWidth,
         cutHeight,
         targetX,
-        targetY,
+        targetY + baselineOffset,
         cutWidth,
         cutHeight
       )