mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-21 23:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(Image Formats Converter): better UI and clean image extension and multiple files

Browse source
This commit is contained in:
ShareVB 2025-01-12 11:43:57 +01:00
parent e9a55414d9
commit c35bacaebd
3 changed files with 2449 additions and 1913 deletions
Download patch file Download diff file Expand all files Collapse all files

5
components.d.ts vendored
View file

@ -144,9 +144,10 @@ declare module '@vue/runtime-core' {
NLayout: typeof import('naive-ui')['NLayout'] NLayout: typeof import('naive-ui')['NLayout']
NLayoutSider: typeof import('naive-ui')['NLayoutSider'] NLayoutSider: typeof import('naive-ui')['NLayoutSider']
NMenu: typeof import('naive-ui')['NMenu'] NMenu: typeof import('naive-ui')['NMenu']
NSpace: typeof import('naive-ui')['NSpace'] NProgress: typeof import('naive-ui')['NProgress']
NScrollbar: typeof import('naive-ui')['NScrollbar']
NSpin: typeof import('naive-ui')['NSpin'] NSpin: typeof import('naive-ui')['NSpin']
NTable: typeof import('naive-ui')['NTable'] NSwitch: typeof import('naive-ui')['NSwitch']
NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default'] NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default'] OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default'] PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

4324
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

33
src/tools/image-converter/image-converter.vue
View file

@ -78,12 +78,17 @@ const outputFormatHasQuality = computed(() => {
const svgWasmLoaded = ref(false); const svgWasmLoaded = ref(false);
async function onFilesUploaded(uploadedFiles: File[]) {
for (const file of uploadedFiles) {
await onFileUploaded(file);
}
}
async function onFileUploaded(uploadedFile: File) { async function onFileUploaded(uploadedFile: File) {
const outputFormatValue = outputFormat.value; const outputFormatValue = outputFormat.value;
file.value = uploadedFile; file.value = uploadedFile;
let fileBuffer = new Uint8Array(await uploadedFile.arrayBuffer()); let fileBuffer = new Uint8Array(await uploadedFile.arrayBuffer());
fileName.value = `${uploadedFile.name}`; fileName.value = uploadedFile.name.replace(/\.\w+$/, '');
status.value = 'processing'; status.value = 'processing';
try { try {
if (outputFormatValue === 'webp') { if (outputFormatValue === 'webp') {
@ -128,16 +133,7 @@ async function onFileUploaded(uploadedFile: File) {
<template> <template>
<div> <div>
<div style="flex: 0 0 100%" mb-2> <h4>First, select output options:</h4>
<div mx-auto max-w-600px>
<c-file-upload
title="Drag and drop an image file here, or click to select a file"
accept="image/*"
paste-image
@file-upload="onFileUploaded"
/>
</div>
</div>
<c-select <c-select
v-model:value="outputFormat" v-model:value="outputFormat"
@ -157,6 +153,21 @@ async function onFileUploaded(uploadedFile: File) {
</n-form-item> </n-form-item>
</div> </div>
<h4>Then, drag and drop your images below and they will be converted and downloaded immediately:</h4>
<div style="flex: 0 0 100%" mb-2>
<div mx-auto max-w-600px>
<c-file-upload
title="Drag and drop images files here, or click to select some files"
accept="image/*"
paste-image
multiple
@file-upload="onFileUploaded"
@files-upload="onFilesUploaded"
/>
</div>
</div>
<div mt-3 flex justify-center> <div mt-3 flex justify-center>
<c-alert v-if="status === 'error'" type="error"> <c-alert v-if="status === 'error'" type="error">
An error occured processing {{ fileName }} An error occured processing {{ fileName }}