From eac61edf2cbadbeb0cbf177def507a0671624db6 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 26 Dec 2024 00:43:43 +0900
Subject: [PATCH] fix

---
 packages/frontend/src/scripts/watermark.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/scripts/watermark.ts b/packages/frontend/src/scripts/watermark.ts
index 426ac5edc7..c83fffcb4d 100644
--- a/packages/frontend/src/scripts/watermark.ts
+++ b/packages/frontend/src/scripts/watermark.ts
@@ -160,6 +160,7 @@ export function applyWatermark(img: string | Blob, el: HTMLCanvasElement | Offsc
 
 							return { width, height };
 						})();
+						const rotateRad = (config.rotate ?? 0) * Math.PI / 180;
 
 						ctx.globalAlpha = config.opacity ?? 1;
 
@@ -181,7 +182,6 @@ export function applyWatermark(img: string | Blob, el: HTMLCanvasElement | Offsc
 							if (pattern) {
 								ctx.fillStyle = pattern;
 								if (config.rotate != null && config.rotate !== 0) {
-									const rotateRad = config.rotate * Math.PI / 180;
 									ctx.translate(canvas.width / 2, canvas.height / 2);
 									ctx.rotate(rotateRad);
 									ctx.translate(-canvas.width / 2, -canvas.height / 2);
@@ -196,6 +196,12 @@ export function applyWatermark(img: string | Blob, el: HTMLCanvasElement | Offsc
 							}
 						} else {
 							const x = (() => {
+								let rotateX = 0; // 回転によるX座標の補正
+
+								if (config.rotate != null && config.rotate !== 0 && !config.noBoundingBoxExpansion) {
+									rotateX = Math.abs(Math.abs(width * Math.cos(rotateRad)) + Math.abs(height * Math.sin(rotateRad)) - width) / 2;
+								}
+
 								switch (config.anchor) {
 									case 'center':
 									case 'top':
@@ -204,11 +210,11 @@ export function applyWatermark(img: string | Blob, el: HTMLCanvasElement | Offsc
 									case 'left':
 									case 'top-left':
 									case 'bottom-left':
-										return 0 + (config.padding ? config.padding.left ?? 0 : 0);
+										return rotateX + (config.padding ? config.padding.left ?? 0 : 0);
 									case 'right':
 									case 'top-right':
 									case 'bottom-right':
-										return canvas.width - width - (config.padding ? config.padding.right ?? 0 : 0);
+										return canvas.width - width - (config.padding ? config.padding.right ?? 0 : 0) - rotateX;
 								}
 							})();
 
@@ -216,7 +222,6 @@ export function applyWatermark(img: string | Blob, el: HTMLCanvasElement | Offsc
 								let rotateY = 0; // 回転によるY座標の補正
 
 								if (config.rotate != null && config.rotate !== 0 && !config.noBoundingBoxExpansion) {
-									const rotateRad = config.rotate * Math.PI / 180;
 									rotateY = Math.abs(Math.abs(width * Math.sin(rotateRad)) + Math.abs(height * Math.cos(rotateRad)) - height) / 2;
 								}