From 7d80c2129be976f09a134c2ded8f18771d8b948a Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 16 Dec 2024 11:33:04 +0900
Subject: [PATCH] =?UTF-8?q?repeat=E3=81=AErotate=E3=81=AB=E5=AF=BE?=
 =?UTF-8?q?=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkWatermarkEditorDialog.vue      |  3 ++-
 packages/frontend/src/scripts/watermark.ts          | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.vue
index 820b6bdc84..f114824835 100644
--- a/packages/frontend/src/components/MkWatermarkEditorDialog.vue
+++ b/packages/frontend/src/components/MkWatermarkEditorDialog.vue
@@ -73,7 +73,8 @@ const watermarkConfig = ref<WatermarkConfig>(defaultStore.state.watermarkConfig
 	opacity: 0.5,
 	anchor: 'bottom-right',
 	gravity: 'auto',
-	repeat: false,
+	repeat: true,
+	rotate: 15,
 	__bypassMediaProxy: true,
 });
 //#endregion
diff --git a/packages/frontend/src/scripts/watermark.ts b/packages/frontend/src/scripts/watermark.ts
index 00bf9f8ada..b8da499985 100644
--- a/packages/frontend/src/scripts/watermark.ts
+++ b/packages/frontend/src/scripts/watermark.ts
@@ -56,7 +56,18 @@ export async function applyWatermark(img: string | Blob, el: HTMLCanvasElement,
 					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);
+						if (config.rotate) {
+							ctx.translate(canvas.width / 2, canvas.height / 2);
+							ctx.rotate(config.rotate * Math.PI / 180);
+							ctx.translate(-canvas.width / 2, -canvas.height / 2);
+							const rotatedWidth = Math.abs(canvas.width * Math.cos(config.rotate * Math.PI / 180)) + Math.abs(canvas.height * Math.sin(config.rotate * Math.PI / 180));
+							const rotatedHeight = Math.abs(canvas.width * Math.sin(config.rotate * Math.PI / 180)) + Math.abs(canvas.height * Math.cos(config.rotate * Math.PI / 180));
+							const x = Math.abs(rotatedWidth - canvas.width) / -2;
+							const y = Math.abs(rotatedHeight - canvas.height) / -2;
+							ctx.fillRect(x, y, rotatedWidth, rotatedHeight);
+						} else {
+							ctx.fillRect(0, 0, canvas.width, canvas.height);
+						}
 					}
 				} else {
 					const x = (() => {