OpenSource/misskey
OpenSource/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2024-12-28 03:40:25 +01:00
Code Issues Projects Releases Packages Wiki Activity

fix: 画像のアスペクト比によらず一定の大きさで表示できるように

Browse source
This commit is contained in:
kakkokari-gtyih 2024-12-19 21:43:44 +09:00
parent 7c015b78c5
commit 9fd07c0823
2 changed files with 28 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/frontend/src/components/MkWatermarkEditorDialog.vue
View file

@ -282,6 +282,7 @@ onMounted(() => {
watch([useWatermark, watermarkConfig], ([useWatermarkTo, watermarkConfigTo]) => { watch([useWatermark, watermarkConfig], ([useWatermarkTo, watermarkConfigTo]) => {
canvasLoading.value = true; canvasLoading.value = true;
if (canvasEl.value) { if (canvasEl.value) {
// @/scripts/watermark.ts の DEFAULT_ASPECT_RATIO と同じ縦横比の画像を使用すること
applyWatermark('/client-assets/hill.webp', canvasEl.value, useWatermarkTo && canPreview(watermarkConfigTo) ? watermarkConfigTo : null).then(() => { applyWatermark('/client-assets/hill.webp', canvasEl.value, useWatermarkTo && canPreview(watermarkConfigTo) ? watermarkConfigTo : null).then(() => {
canvasLoading.value = false; canvasLoading.value = false;
}); });

45
packages/frontend/src/scripts/watermark.ts
View file

@ -95,6 +95,9 @@ export type WatermarkConfig = {
repeat: true; 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) { if (config.fileUrl != null || config.fileId != null) {
const watermark = new Image(); const watermark = new Image();
watermark.onload = () => { watermark.onload = () => {
const canvasAspectRatio = canvas.width / canvas.height; // 横長は1より大きい
const watermarkAspectRatio = watermark.width / watermark.height; // 横長は1より大きい const watermarkAspectRatio = watermark.width / watermark.height; // 横長は1より大きい
const { width, height } = (() => { const { width, height } = (() => {
const desiredWidth = canvas.width * (config.sizeRatio ?? 1); // 1. 画像を覆うサイズのプレビュー画像相当の領域を計算
const desiredHeight = canvas.height * (config.sizeRatio ?? 1); let canvasPreviewWidth: number;
let canvasPreviewHeight: number;
if ( if (canvas.width > canvas.height) {
(watermarkAspectRatio > 1 && canvasAspectRatio > 1) || // 両方横長 canvasPreviewWidth = canvas.width;
(watermarkAspectRatio < 1 && canvasAspectRatio < 1) // 両方縦長 canvasPreviewHeight = canvas.width / DEFAULT_ASPECT_RATIO;
) {
// 横幅を基準にウォーターマークのサイズを決定
return {
width: desiredWidth,
height: desiredWidth / watermarkAspectRatio,
};
} else { } else {
// 縦幅を基準にウォーターマークのサイズを決定 canvasPreviewWidth = canvas.height * DEFAULT_ASPECT_RATIO;
return { canvasPreviewHeight = canvas.height;
width: desiredHeight * watermarkAspectRatio,
height: desiredHeight,
};
} }
// 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; ctx.globalAlpha = config.opacity ?? 1;