Merge branch 'feat/heic-converter' into chore/all-my-stuffs

# Conflicts:
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -99,6 +99,10 @@
     "js-base64": "^3.7.7",
     "jsbarcode": "^3.11.6",
     "iconv-lite": "^0.6.3",
+    "heic-convert": "^2.1.0",
+    "highlight.js": "^11.7.0",
+    "iarna-toml-esm": "^3.0.5",
+    "ibantools": "^4.3.3",
     "js-base64": "^3.7.7",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",

pnpm-lock.yaml

@@ -0,0 +1,30 @@
+declare module 'heic-convert/browser' {
+    interface ConversionOptions {
+        /**
+         * the HEIC file buffer
+         */
+        buffer: ArrayBufferLike;
+        /**
+         * output format
+         */
+        format: "JPEG" | "PNG";
+        /**
+         * the JPEG compression quality, between 0 and 1
+         * @default 0.92
+         */
+        quality?: number;
+    }
+    
+    interface Convertible {
+        convert(): Promise<ArrayBuffer>;
+    }
+    
+    /** @async */
+    declare function convert(image: ConversionOptions): Promise<ArrayBuffer>;
+    declare namespace convert {
+        /** @async */
+        function all(image: ConversionOptions): Promise<Convertible[]>;
+    }
+    
+    export default convert;
+}

src/tools/heic-converter/heic-convert.d.ts

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { Base64 } from 'js-base64';
+import heicConvert from 'heic-convert/browser';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+
+const status = ref<'idle' | 'done' | 'error' | 'processing'>('idle');
+const file = ref<File | null>(null);
+
+const base64OutputImage = ref('');
+const fileName = ref('');
+const format = ref('jpg');
+const formats = [
+  { value: 'jpg', label: 'JPEG' },
+  { value: 'png', label: 'PNG' },
+];
+const { download } = useDownloadFileFromBase64(
+  {
+    source: base64OutputImage,
+    filename: fileName,
+  });
+
+async function onFileUploaded(uploadedFile: File) {
+  file.value = uploadedFile;
+  const fileBuffer = await uploadedFile.arrayBuffer();
+
+  fileName.value = `${uploadedFile.name}.${format.value}`;
+  status.value = 'processing';
+  try {
+    let convertFormat;
+    if (format.value === 'jpg') {
+      convertFormat = 'JPEG';
+    }
+    else if (format.value === 'png') {
+      convertFormat = 'PNG';
+    }
+    else {
+      throw new Error('unknown format');
+    }
+
+    const outputBuffer = await heicConvert({
+      buffer: new Uint8Array(fileBuffer),
+      format: convertFormat as ('JPEG' | 'PNG'),
+      quality: 0.98,
+    });
+    base64OutputImage.value = `data:image/${convertFormat.toLowerCase()};base64,${Base64.fromUint8Array(new Uint8Array(outputBuffer))}`;
+
+    status.value = 'done';
+
+    download();
+  }
+  catch (e) {
+    status.value = 'error';
+  }
+}
+</script>
+
+<template>
+  <div>
+    <c-select
+      v-model:value="format"
+      :options="formats"
+      label="Output format"
+    />
+
+    <div style="flex: 0 0 100%" mt-3>
+      <div mx-auto max-w-600px>
+        <c-file-upload
+          title="Drag and drop a HEIC file here, or click to select a file"
+          accept=".heic,.heif" @file-upload="onFileUploaded"
+        />
+      </div>
+    </div>
+    <div mt-3 flex justify-center>
+      <img :src="base64OutputImage" max-w-300px>
+    </div>
+
+    <div mt-3 flex justify-center>
+      <c-alert v-if="status === 'error'" type="error">
+        An error occured processing {{ fileName }}. HEIC/HEIF is invalid.
+      </c-alert>
+      <n-spin
+        v-if="status === 'processing'"
+        size="small"
+      />
+    </div>
+  </div>
+</template>

src/tools/heic-converter/heic-converter.vue

@@ -0,0 +1,12 @@
+import { Photo } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'HEIC Converter',
+  path: '/heic-converter',
+  description: 'HEIC Converter to JPEG or PNG',
+  keywords: ['heic', 'heif', 'convert', 'decoder', 'converter'],
+  component: () => import('./heic-converter.vue'),
+  icon: Photo,
+  createdAt: new Date('2024-04-28'),
+});

src/tools/heic-converter/index.ts

@@ -36,6 +36,7 @@ import { tool as curlConverter } from './curl-converter';
 import { tool as durationCalculator } from './duration-calculator';
 import { tool as folderStructureDiagram } from './folder-structure-diagram';
 import { tool as hddCalculator } from './hdd-calculator';
+import { tool as heicConverter } from './heic-converter';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -196,6 +197,7 @@ export const toolsByCategory: ToolCategory[] = [
       cameraRecorder,
       barcodeReader,
       barcodeGenerator,
+      heicConverter,
     ],
   },
   {