From d2b242269778a95f47c76298dfa3465f5d217409 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 16 Dec 2024 10:48:04 +0900
Subject: [PATCH] fix

---
 packages/frontend/src/scripts/watermark.ts | 79 +++++++++++++---------
 1 file changed, 46 insertions(+), 33 deletions(-)

diff --git a/packages/frontend/src/scripts/watermark.ts b/packages/frontend/src/scripts/watermark.ts
index f6b03568c6..8b5ccf7d5d 100644
--- a/packages/frontend/src/scripts/watermark.ts
+++ b/packages/frontend/src/scripts/watermark.ts
@@ -42,40 +42,53 @@ export function applyWatermark(img: string | Blob, el: HTMLCanvasElement, config
 			watermark.onload = () => {
 				const width = config.width || watermark.width;
 				const height = config.height || watermark.height;
-				const x = (() => {
-					switch (config.anchor) {
-						case 'center':
-						case 'top':
-						case 'bottom':
-							return (canvas.width - width) / 2;
-						case 'left':
-						case 'top-left':
-						case 'bottom-left':
-							return 0;
-						case 'right':
-						case 'top-right':
-						case 'bottom-right':
-							return canvas.width - width;
-					}
-				})();
-				const y = (() => {
-					switch (config.anchor) {
-						case 'center':
-						case 'left':
-						case 'right':
-							return (canvas.height - height) / 2;
-						case 'top':
-						case 'top-left':
-						case 'top-right':
-							return 0;
-						case 'bottom':
-						case 'bottom-left':
-						case 'bottom-right':
-							return canvas.height - height;
-					}
-				})();
 				ctx.globalAlpha = config.opacity;
-				ctx.drawImage(watermark, x, y, width, height);
+				if (config.repeat !== false) {
+					const resizedWatermark = document.createElement('canvas');
+					resizedWatermark.width = width;
+					resizedWatermark.height = height;
+					const resizedCtx = resizedWatermark.getContext('2d')!;
+					resizedCtx.drawImage(watermark, 0, 0, width, height);
+					const pattern = ctx.createPattern(resizedWatermark, config.repeat === true ? 'repeat' : `repeat-${config.repeat}`);
+					if (pattern) {
+						ctx.fillStyle = pattern;
+						ctx.fillRect(0, 0, canvas.width, canvas.height);
+					}
+				} else {
+					const x = (() => {
+						switch (config.anchor) {
+							case 'center':
+							case 'top':
+							case 'bottom':
+								return (canvas.width - width) / 2;
+							case 'left':
+							case 'top-left':
+							case 'bottom-left':
+								return 0;
+							case 'right':
+							case 'top-right':
+							case 'bottom-right':
+								return canvas.width - width;
+						}
+					})();
+					const y = (() => {
+						switch (config.anchor) {
+							case 'center':
+							case 'left':
+							case 'right':
+								return (canvas.height - height) / 2;
+							case 'top':
+							case 'top-left':
+							case 'top-right':
+								return 0;
+							case 'bottom':
+							case 'bottom-left':
+							case 'bottom-right':
+								return canvas.height - height;
+						}
+					})();
+					ctx.drawImage(watermark, x, y, width, height);
+				}
 			};
 			watermark.src = config.fileUrl;
 		}