wip
This commit is contained in:
		
							parent
							
								
									73157dd898
								
							
						
					
					
						commit
						6205dc44f0
					
				|  | @ -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 { | ||||
|  |  | |||
|  | @ -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, | ||||
| 	}; | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue