Selectable resize scale

CHANGELOG.md

@@ -15,6 +15,9 @@
 ## 2024.3.1-kinel.6 (unreleased)
 
 ### General
+- Enhance: 画像アップロード時に縮小する場合の大きさを、2048, 2560, 4096, 8192から選択出来るようにしました。
+  - デフォルト値は2560です。
+  - なお、縮小した方がファイルサイズが大きくなってしまう場合は縮小していない画像を利用する、というMisskeyの仕様があるため、設定内容によらず元の画像のままになる場合があります。
 - Fix: パブリック投稿をホーム投稿に変更するモデレーション操作がリプライに正しく適用されていなかった問題を修正
 
 ## 2024.3.1-kinel.5

locales/index.d.ts

@@ -9266,7 +9266,7 @@ export interface Locale extends ILocale {
          */
         "imageResize": string;
         /**
-         * 縮小する場合は2560x2560以下になるように縮小されます。
+         * 縮小する場合は設定値以下になるように縮小されます。縮小処理でファイルサイズが大きくなってしまう場合は元の画像が利用されます。
          */
         "imageResizeDescription": string;
         /**
@@ -9277,6 +9277,28 @@ export interface Locale extends ILocale {
          * 非可逆圧縮を指定しない場合は、元画像に応じて非可逆圧縮か可逆圧縮かが自動的に選択されます。
          */
         "imageCompressionLossyDescription": string;
+        "_imageResizeSize": {
+            /**
+             * 画像縮小時の解像度
+             */
+            "title": string;
+            /**
+             * 2048x2048
+             */
+            "max2048": string;
+            /**
+             * 2560x2560
+             */
+            "max2560": string;
+            /**
+             * 4096x4096
+             */
+            "max4096": string;
+            /**
+             * 8192x8192
+             */
+            "max8192": string;
+        };
     };
     "_moderationLogTypes": {
         /**

locales/ja-JP.yml

@@ -2458,9 +2458,15 @@ _imageCompressionMode:
   title: "画像の圧縮形式"
   description: "オリジナル画像を保持しない場合に、Web公開用画像の圧縮形式を選択できます。"
   imageResize: "画像を縮小する"
-  imageResizeDescription: "縮小する場合は2560x2560以下になるように縮小されます。"
+  imageResizeDescription: "縮小する場合は設定値以下になるように縮小されます。縮小処理でファイルサイズが大きくなってしまう場合は元の画像が利用されます。"
   imageCompressionLossy: "画像を常に非可逆圧縮する"
   imageCompressionLossyDescription: "非可逆圧縮を指定しない場合は、元画像に応じて非可逆圧縮か可逆圧縮かが自動的に選択されます。"
+  _imageResizeSize:
+    title: "画像縮小時の解像度"
+    max2048: "2048x2048"
+    max2560: "2560x2560"
+    max4096: "4096x4096"
+    max8192: "8192x8192"
 
 _moderationLogTypes:
   createRole: "ロールを作成"

packages/frontend/src/pages/settings/drive.vue

@@ -55,6 +55,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<template #label>{{ i18n.ts._imageCompressionMode.imageResize }}</template>
 						<template #caption>{{ i18n.ts._imageCompressionMode.imageResizeDescription }}</template>
 					</MkSwitch>
+					<MkSelect v-model="imageResizeSize">
+						<template #label>{{ i18n.ts._imageCompressionMode._imageResizeSize.title }}</template>
+						<option value="2048">{{ i18n.ts._imageCompressionMode._imageResizeSize.max2048 }}</option>
+						<option value="2560">{{ i18n.ts._imageCompressionMode._imageResizeSize.max2560 }}</option>
+						<option value="4096">{{ i18n.ts._imageCompressionMode._imageResizeSize.max4096 }}</option>
+						<option value="8192">{{ i18n.ts._imageCompressionMode._imageResizeSize.max8192 }}</option>
+					</MkSelect>
 					<MkSwitch v-model="imageCompressionLossy">
 						<template #label>{{ i18n.ts._imageCompressionMode.imageCompressionLossy }}</template>
 						<template #caption>{{ i18n.ts._imageCompressionMode.imageCompressionLossyDescription }}</template>
@@ -80,6 +87,7 @@ import * as Misskey from 'misskey-js';
 import tinycolor from 'tinycolor2';
 import FormLink from '@/components/form/link.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
+import MkSelect from '@/components/MkSelect.vue';
 import FormSection from '@/components/form/section.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import FormSplit from '@/components/form/split.vue';
@@ -118,6 +126,7 @@ const keepOriginalUploading = computed(defaultStore.makeGetterSetter('keepOrigin
 const imageCompressionMode = computed(defaultStore.makeGetterSetter('imageCompressionMode'));
 const imageResize = ref(!!imageCompressionMode.value?.startsWith('resize'));
 const imageCompressionLossy = ref(!!imageCompressionMode.value?.endsWith('CompressLossy'));
+const imageResizeSize = computed(defaultStore.makeGetterSetter('imageResizeSize'));
 
 watch([imageResize, imageCompressionLossy], ([imageResizeValue, imageCompressionLossyValue]) => {
 	const resizeMode: 'resize' | 'noResize' = imageResizeValue ? 'resize' : 'noResize';

packages/frontend/src/scripts/upload/compress-config.ts

@@ -25,7 +25,6 @@ const inputCompressKindMap = {
 	'image/svg+xml': 'lossless',
 } as const;
 
-const resizeSizeConfig = { maxWidth: 2560, maxHeight: 2560 } as const;
 const noResizeSizeConfig = { maxWidth: Number.MAX_SAFE_INTEGER, maxHeight: Number.MAX_SAFE_INTEGER } as const;
 
 async function isLosslessWebp(file: Blob): Promise<boolean> {
@@ -62,11 +61,12 @@ export async function getCompressionConfig(file: File): Promise<BrowserImageResi
 
 	const resize = defaultStore.state.imageCompressionMode.startsWith('resize');
 	const compressKind = defaultStore.state.imageCompressionMode.endsWith('CompressLossy') ? 'lossy' : inputCompressKind;
+	const imageResizeSize = parseInt(defaultStore.state.imageResizeSize, 10);
 
 	const webpSupported = isWebpSupported();
 
 	const imgFormatConfig = (webpSupported ? compressTypeMap : compressTypeMapFallback)[compressKind];
-	const sizeConfig = resize ? resizeSizeConfig : noResizeSizeConfig;
+	const sizeConfig = resize ? { maxWidth: imageResizeSize, maxHeight: imageResizeSize } : noResizeSizeConfig;
 
 	if (!resize) {
 		// we don't resize images so we may omit recompression

packages/frontend/src/store.ts

@@ -119,6 +119,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'account',
 		default: 'resizeCompress' as 'resizeCompress' | 'noResizeCompress' | 'resizeCompressLossy' | 'noResizeCompressLossy',
 	},
+	imageResizeSize: {
+		where: 'account',
+		default: '2560',
+	},
 	memo: {
 		where: 'account',
 		default: null,