From 9fd07c08238e6c354edabb231aaff1b1bb4ef5dc Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Thu, 19 Dec 2024 21:43:44 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=94=BB=E5=83=8F=E3=81=AE=E3=82=A2?= =?UTF-8?q?=E3=82=B9=E3=83=9A=E3=82=AF=E3=83=88=E6=AF=94=E3=81=AB=E3=82=88?= =?UTF-8?q?=E3=82=89=E3=81=9A=E4=B8=80=E5=AE=9A=E3=81=AE=E5=A4=A7=E3=81=8D?= =?UTF-8?q?=E3=81=95=E3=81=A7=E8=A1=A8=E7=A4=BA=E3=81=A7=E3=81=8D=E3=82=8B?= =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MkWatermarkEditorDialog.vue | 1 + packages/frontend/src/scripts/watermark.ts | 45 +++++++++++-------- 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.vue index 4e5f1cd503..b22d3516e8 100644 --- a/packages/frontend/src/components/MkWatermarkEditorDialog.vue +++ b/packages/frontend/src/components/MkWatermarkEditorDialog.vue @@ -282,6 +282,7 @@ onMounted(() => { watch([useWatermark, watermarkConfig], ([useWatermarkTo, watermarkConfigTo]) => { canvasLoading.value = true; if (canvasEl.value) { + // @/scripts/watermark.ts の DEFAULT_ASPECT_RATIO と同じ縦横比の画像を使用すること applyWatermark('/client-assets/hill.webp', canvasEl.value, useWatermarkTo && canPreview(watermarkConfigTo) ? watermarkConfigTo : null).then(() => { canvasLoading.value = false; }); diff --git a/packages/frontend/src/scripts/watermark.ts b/packages/frontend/src/scripts/watermark.ts index 1ce675c25e..80a0f9b060 100644 --- a/packages/frontend/src/scripts/watermark.ts +++ b/packages/frontend/src/scripts/watermark.ts @@ -95,6 +95,9 @@ export type WatermarkConfig = { repeat: true; }); +/** 基準とするアスペクト比（変えたら今後付加されるウォーターマークの大きさが全部変わるので変えるべきではない。プレビュー画像を変えたいなら画像の縦横比をこれに合わせること） */ +const DEFAULT_ASPECT_RATIO = 4 / 3; + /** * プレビューに必要な値が全部揃っているかどうかを判定する */ @@ -127,28 +130,34 @@ export function applyWatermark(img: string | Blob, el: HTMLCanvasElement | Offsc if (config.fileUrl != null || config.fileId != null) { const watermark = new Image(); watermark.onload = () => { - const canvasAspectRatio = canvas.width / canvas.height; // 横長は1より大きい const watermarkAspectRatio = watermark.width / watermark.height; // 横長は1より大きい const { width, height } = (() => { - const desiredWidth = canvas.width * (config.sizeRatio ?? 1); - const desiredHeight = canvas.height * (config.sizeRatio ?? 1); - - if ( - (watermarkAspectRatio > 1 && canvasAspectRatio > 1) || // 両方横長 - (watermarkAspectRatio < 1 && canvasAspectRatio < 1) // 両方縦長 - ) { - // 横幅を基準にウォーターマークのサイズを決定 - return { - width: desiredWidth, - height: desiredWidth / watermarkAspectRatio, - }; + // 1. 画像を覆うサイズのプレビュー画像相当の領域を計算 + let canvasPreviewWidth: number; + let canvasPreviewHeight: number; + if (canvas.width > canvas.height) { + canvasPreviewWidth = canvas.width; + canvasPreviewHeight = canvas.width / DEFAULT_ASPECT_RATIO; } else { - // 縦幅を基準にウォーターマークのサイズを決定 - return { - width: desiredHeight * watermarkAspectRatio, - height: desiredHeight, - }; + canvasPreviewWidth = canvas.height * DEFAULT_ASPECT_RATIO; + canvasPreviewHeight = canvas.height; } + + // 2. プレビュー画像相当の領域から、幅・高さそれぞれをベースにリサイズした場合の + // ウォーターマークのサイズを計算 + let width = canvasPreviewWidth * (config.sizeRatio ?? 1); + let height = canvasPreviewHeight * (config.sizeRatio ?? 1); + + // 3. ウォーターマークのアスペクト比に合わせてリサイズ + if (watermarkAspectRatio > 1) { + // ウォーターマークが横長（横幅を基準に縮小） + height = width / watermarkAspectRatio; + } else { + // ウォーターマークが縦長（縦幅を基準に縮小） + width = height * watermarkAspectRatio; + } + + return { width, height }; })(); ctx.globalAlpha = config.opacity ?? 1;