feat(new tool): Images Formats Converter

Fix CorentinTh#1313

Author: sharevb

components.d.ts

@@ -101,6 +101,7 @@ declare module '@vue/runtime-core' {
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
     IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
+    ImageConverter: typeof import('./src/tools/image-converter/image-converter.vue')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
@@ -135,13 +136,16 @@ declare module '@vue/runtime-core' {
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
     NTable: typeof import('naive-ui')['NTable']
     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']

package.json

@@ -68,6 +68,7 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "image-in-browser": "^3.2.0",
     "js-base64": "^3.7.6",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
@@ -98,6 +99,7 @@
     "vue-router": "^4.1.6",
     "vue-shadow-dom": "^4.2.0",
     "vue-tsc": "^1.8.1",
+    "webp-converter-browser": "^1.0.4",
     "xml-formatter": "^3.3.2",
     "xml-js": "^1.6.11",
     "yaml": "^2.2.1"

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
-import type { Ref } from 'vue';
+import type { MaybeRef, Ref } from 'vue';
 import _ from 'lodash';
+import { get } from '@vueuse/core';
 
 export {
   getMimeTypeFromBase64,
@@ -75,21 +76,11 @@ function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
 }
 
 function useDownloadFileFromBase64(
-  { source, filename, extension, fileMimeType }:
-  { source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
-  return {
-    download() {
-      downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
-    },
-  };
-}
-
-function useDownloadFileFromBase64Refs(
   { source, filename, extension }:
-  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  { source: MaybeRef<string>; filename?: MaybeRef<string>; extension?: MaybeRef<string> }) {
   return {
     download() {
-      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+      downloadFromBase64({ sourceValue: get(source), filename: get(filename), extension: get(extension) });
     },
   };
 }
@@ -116,3 +107,13 @@ function previewImageFromBase64(base64String: string): HTMLImageElement {
 
   return img;
 }
+
+function useDownloadFileFromBase64Refs(
+  { source, filename, extension }:
+  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  return {
+    download() {
+      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+    },
+  };
+}

src/composable/downloadBase64.ts

@@ -0,0 +1,139 @@
+<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' });
+const outputFormatHasQuality = computed(() => {
+  return outputFormat.value === 'jpg';
+});
+
+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 = await arrayBufferToWebP(fileBuffer);
+      fileExtension.value = 'webp';
+      base64OutputFile.value = `data:image/webp;base64,${Base64.fromUint8Array(new Uint8Array(await encodedImage.arrayBuffer()))}`;
+    }
+    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%" mb-2>
+      <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
+      v-model:value="outputFormat"
+      label="Output format:"
+      label-position="left"
+      :options="Object.keys(outputFormats)"
+      placeholder="Select output format"
+      mb-2
+    />
+    <n-form-item v-if="outputFormatHasQuality" label="Output quality:" label-placement="left" mb-2>
+      <n-input-number v-model:value="outputQuality" :max="100" :min="0" w-full />
+    </n-form-item>
+
+    <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/image-converter.vue

@@ -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/image-converter/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',