feat(new tool): HEIC Converter

Fix CorentinTh#997

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

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { Base64 } from 'js-base64';
+import heicConvert from 'heic-convert/browser';
+import { useDownloadFileFromBase64Refs } 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 } = useDownloadFileFromBase64Refs(
+ {
+ 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: fileBuffer,
+ format: convertFormat,
+ quality: 0.98,
+ });
+ base64OutputImage.value = `data:image/${convertFormat.toLowerCase()};base64,${Base64.fromUint8Array(outputBuffer)}`;
+
+ status.value = 'done';
+
+ download();
+ }
+ catch (e) {
+ status.value = 'error';
+ }
+}
+</script>
+
+<template>
+ <div>
+ <c-select
+ v-model:value="format"
+ :options="formats"
+ label="Output format"
+ w-100px
+ />
+
+ <div style="flex: 0 0 100%" mb-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/index.ts

@@ -0,0 +1,12 @@
+import { ArrowsShuffle } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+ name: 'Heic converter',
+ path: '/heic-converter',
+ description: '',
+ keywords: ['heic', 'converter'],
+ component: () => import('./heic-converter.vue'),
+ icon: ArrowsShuffle,
+ createdAt: new Date('2024-04-23'),
+});

src/tools/index.ts

@@ -6,6 +6,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
 import { tool as safelinkDecoder } from './safelink-decoder';
+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';
@@ -133,6 +134,7 @@ export const toolsByCategory: ToolCategory[] = [
  {
  name: 'Images and videos',
  components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
+ heicConverter,
  },
  {
  name: 'Development',