This commit is contained in:
syuilo 2025-05-12 21:17:41 +09:00
parent 73157dd898
commit 6205dc44f0
2 changed files with 43 additions and 12 deletions

View File

@ -39,9 +39,18 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<MkSwitch v-model="compress">
<MkSelect
v-if="items.length > 0"
v-model="compressionLevel"
:items="[
{ value: 0, label: i18n.ts.none },
{ value: 1, label: i18n.ts.low },
{ value: 2, label: i18n.ts.middle },
{ value: 3, label: i18n.ts.high },
]"
>
<template #label>{{ i18n.ts.compress }}</template>
</MkSwitch>
</MkSelect>
</div>
<template #footer>
@ -54,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { markRaw, onMounted, ref, useTemplateRef, watch } from 'vue';
import { computed, markRaw, onMounted, ref, useTemplateRef, watch } from 'vue';
import * as Misskey from 'misskey-js';
import { v4 as uuid } from 'uuid';
import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
@ -68,6 +77,7 @@ import { instance } from '@/instance.js';
import MkButton from '@/components/MkButton.vue';
import bytes from '@/filters/bytes.js';
import MkSwitch from '@/components/MkSwitch.vue';
import MkSelect from '@/components/MkSelect.vue';
const $i = ensureSignin();
@ -103,8 +113,29 @@ const items = ref([] as {
const dialog = useTemplateRef('dialog');
const compress = ref(true);
const uploadStarted = ref(false);
const compressionLevel = ref<0 | 1 | 2 | 3>(2);
const compressionSettings = computed(() => {
if (compressionLevel.value === 1) {
return {
maxWidth: 1024 + 512,
maxHeight: 1024 + 512,
};
} else if (compressionLevel.value === 2) {
return {
maxWidth: 1024 + 256,
maxHeight: 1024 + 256,
};
} else if (compressionLevel.value === 3) {
return {
maxWidth: 1024,
maxHeight: 1024,
};
} else {
return null;
}
});
watch(items, () => {
if (uploadStarted.value && items.value.every(item => item.uploaded)) {
@ -135,7 +166,7 @@ function upload() {
const reader = new FileReader();
reader.onload = async (): Promise<void> => {
const config = compress.value ? await getCompressionConfig(item.file) : undefined;
const config = compressionLevel.value !== 0 ? await getCompressionConfig(item.file, compressionSettings.value) : undefined;
let resizedImage: Blob | undefined;
if (config) {
try {

View File

@ -8,28 +8,28 @@ import { isWebpSupported } from './isWebpSupported.js';
import type { BrowserImageResizerConfigWithConvertedOutput } from '@misskey-dev/browser-image-resizer';
const compressTypeMap = {
'image/jpeg': { quality: 0.90, mimeType: 'image/webp' },
'image/jpeg': { quality: 0.85, mimeType: 'image/webp' },
'image/png': { quality: 1, mimeType: 'image/webp' },
'image/webp': { quality: 0.90, mimeType: 'image/webp' },
'image/webp': { quality: 0.85, mimeType: 'image/webp' },
'image/svg+xml': { quality: 1, mimeType: 'image/webp' },
} as const;
const compressTypeMapFallback = {
'image/jpeg': { quality: 0.85, mimeType: 'image/jpeg' },
'image/jpeg': { quality: 0.8, mimeType: 'image/jpeg' },
'image/png': { quality: 1, mimeType: 'image/png' },
'image/webp': { quality: 0.85, mimeType: 'image/jpeg' },
'image/webp': { quality: 0.8, mimeType: 'image/jpeg' },
'image/svg+xml': { quality: 1, mimeType: 'image/png' },
} as const;
export async function getCompressionConfig(file: File): Promise<BrowserImageResizerConfigWithConvertedOutput | undefined> {
export async function getCompressionConfig(file: File, options: Partial<{ maxWidth: number; maxHeight: number; }> = {}): Promise<BrowserImageResizerConfigWithConvertedOutput | undefined> {
const imgConfig = (isWebpSupported() ? compressTypeMap : compressTypeMapFallback)[file.type];
if (!imgConfig || await isAnimated(file)) {
return;
}
return {
maxWidth: 2048,
maxHeight: 2048,
maxWidth: options.maxWidth ?? 2048,
maxHeight: options.maxHeight ?? 2048,
debug: true,
...imgConfig,
};