feat(new tool): Images Formats Converter

Fix CorentinTh#1313

src/tools/image-converter/image-converter.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { Base64 } from 'js-base64';
+import type { MemoryImage } from 'image-in-browser';
+import { decodeImage, encodeBmp, encodeGif, encodeIco, encodeJpg, encodePng, encodePvr, encodeTga, encodeTiff } from 'image-in-browser';
+import { arrayBufferToWebP } from 'webp-converter-browser';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+
+const status = ref<'idle' | 'done' | 'error' | 'processing'>('idle');
+const file = ref<File | null>(null);
+
+const base64OutputFile = ref('');
+const fileName = ref('');
+const fileExtension = ref('');
+const { download } = useDownloadFileFromBase64(
+  {
+    source: base64OutputFile,
+    filename: fileName,
+    extension: fileExtension,
+  });
+
+const outputQuality = useQueryParamOrStorage({ name: 'qual', storageName: 'imgconv:q', defaultValue: 0.95 });
+const outputFormats = {
+  png: {
+    mime: 'image/png',
+    save: (image: MemoryImage) => encodePng({ image }),
+  },
+  jpg: {
+    mime: 'image/jpeg',
+    save: (image: MemoryImage) => encodeJpg({ image, quality: outputQuality.value }),
+  },
+  bmp: {
+    mime: 'image/bmp',
+    save: (image: MemoryImage) => encodeBmp({ image }),
+  },
+  gif: {
+    mime: 'image/gif',
+    save: (image: MemoryImage) => encodeGif({ image }),
+  },
+  ico: {
+    mime: 'image/x-icon',
+    save: (image: MemoryImage) => encodeIco({ image }),
+  },
+  tga: {
+    mime: 'image/tga',
+    save: (image: MemoryImage) => encodeTga({ image }),
+  },
+  pvr: {
+    mime: 'image/pvr',
+    save: (image: MemoryImage) => encodePvr({ image }),
+  },
+  tif: {
+    mime: 'image/tif',
+    save: (image: MemoryImage) => encodeTiff({ image }),
+  },
+  webp: {
+    mime: 'image/webp',
+    save: () => null,
+  },
+};
+
+const outputFormat = useQueryParamOrStorage({ name: 'fmt', storageName: 'imgconv:fmt', defaultValue: 'png' });
+
+async function onFileUploaded(uploadedFile: File) {
+  const outputFormatValue = outputFormat.value;
+  file.value = uploadedFile;
+  const fileBuffer = new Uint8Array(await uploadedFile.arrayBuffer());
+
+  fileName.value = `${uploadedFile.name}`;
+  status.value = 'processing';
+  try {
+    if (outputFormatValue === 'webp') {
+      const encodedImage = arrayBufferToWebP(fileBuffer);
+      fileExtension.value = 'webp';
+      base64OutputFile.value = `data:image/webp;base64,${Base64.fromUint8Array(encodedImage)}`;
+    }
+    else {
+      const decodedImage = decodeImage({
+        data: fileBuffer,
+      });
+
+      if (decodedImage == null) {
+        throw new Error('Invalid Image file!');
+      };
+
+      const outConfig = outputFormats[outputFormatValue as (keyof typeof outputFormats)];
+      const encodedImage = outConfig.save(decodedImage);
+      fileExtension.value = outputFormatValue;
+      base64OutputFile.value = `data:${outConfig.mime};base64,${Base64.fromUint8Array(encodedImage!)}`;
+    }
+    status.value = 'done';
+
+    download();
+  }
+  catch (e) {
+    status.value = 'error';
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div style="flex: 0 0 100%">
+      <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>
+
+    <n-form-item label="Output Quality" label-placement="left" label-width="120">
+      <n-input-number v-model:value="outputQuality" :max="100" :min="0" w-full />
+    </n-form-item>
+
+    <c-select
+      v-model:value="outputFormat"
+      label="Output format:"
+      label-position="left"
+      label-width="120"
+      :options="outputFormats"
+      placeholder="Select output format"
+    />
+
+    <div mt-3 flex justify-center>
+      <c-alert v-if="status === 'error'" type="error">
+        An error occured processing {{ fileName }}
+      </c-alert>
+      <n-spin
+        v-if="status === 'processing'"
+        size="small"
+      />
+    </div>
+  </div>
+</template>

src/tools/image-converter/index.ts

@@ -0,0 +1,12 @@
+import { PictureInPicture } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Image Formats Converter',
+  path: '/image-converter',
+  description: 'Convert images from one format to another',
+  keywords: ['image', 'bmp', 'gif', 'ico', 'jpg', 'png', 'tga', 'pvr', 'tiff', 'pnm', 'pbm', 'pgm', 'ppm', 'psd', 'webp', 'converter'],
+  component: () => import('./image-converter.vue'),
+  icon: PictureInPicture,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/index.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as imageConverter } from './image-converter';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -141,7 +142,13 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Images and videos',
-    components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
+    components: [
+      qrCodeGenerator,
+      wifiQrCodeGenerator,
+      svgPlaceholderGenerator,
+      cameraRecorder,
+	  imageConverter,
+    ],
   },
   {
     name: 'Development',