enhance(frontend): selectable resize size

niri-la · May 25, 2024 · 68a2eed · 68a2eed
1 parent 22dc0c2
commit 68a2eed
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 4 deletions.
diff --git a/locales/index.d.ts b/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": string;
+        "_imageResizeSize": {
+            /**
+             * 2048x2048
+             */
+            "max2048": string;
+            /**
+             * 2560x2560
+             */
+            "max2560": string;
+            /**
+             * 4096x4096
+             */
+            "max4096": string;
+            /**
+             * 8192x8192
+             */
+            "max8192": string;
+        };
     };
     "_moderationLogTypes": {
         /**

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

diff --git a/packages/frontend/src/pages/settings/drive.vue b/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 }}</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';

diff --git a/packages/frontend/src/scripts/upload/compress-config.ts b/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> {
@@ -66,7 +65,7 @@ export async function getCompressionConfig(file: File): Promise<BrowserImageResi
 	const webpSupported = isWebpSupported();
 
 	const imgFormatConfig = (webpSupported ? compressTypeMap : compressTypeMapFallback)[compressKind];
-	const sizeConfig = resize ? resizeSizeConfig : noResizeSizeConfig;
+	const sizeConfig = resize ? { maxWidth: parseInt(defaultStore.state.imageResizeSize, 10), maxHeight: parseInt(defaultStore.state.imageResizeSize, 10) } : noResizeSizeConfig;
 
 	if (!resize) {
 		// we don't resize images so we may omit recompression

diff --git a/packages/frontend/src/store.ts b/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,