feat(new tool): Exif Remover

Fix #1196

src/composable/downloadBase64.ts

@@ -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/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 removeExif } from './remove-exif';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -132,7 +133,13 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Images and videos',
-    components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
+    components: [
+      qrCodeGenerator,
+      wifiQrCodeGenerator,
+      svgPlaceholderGenerator,
+      cameraRecorder,
+      removeExif,
+    ],
   },
   {
     name: 'Development',

src/tools/remove-exif/index.ts

@@ -0,0 +1,12 @@
+import { PictureInPictureOff } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Remove EXIF',
+  path: '/remove-exif',
+  description: 'Remove Exif from JPEG Files',
+  keywords: ['remove', 'exif', 'jpeg'],
+  component: () => import('./remove-exif.vue'),
+  icon: PictureInPictureOff,
+  createdAt: new Date('2024-07-14'),
+});

src/tools/remove-exif/remove-exif.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { Buffer } from 'node:buffer';
+import { Base64 } from 'js-base64';
+import ExifTransformer from 'exif-be-gone';
+import MemoryStream from 'memorystream';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+
+const status = ref<'idle' | 'done' | 'error' | 'processing'>('idle');
+const file = ref<File | null>(null);
+
+interface ToBufferMemoryStream extends MemoryStream {
+  toBuffer(): Buffer
+}
+
+const base64OutputFile = ref('');
+const fileName = ref('');
+const { download } = useDownloadFileFromBase64(
+  {
+    source: base64OutputFile,
+    filename: fileName,
+    extension: 'jpg',
+  });
+
+async function onFileUploaded(uploadedFile: File) {
+  file.value = uploadedFile;
+  const fileBuffer = await uploadedFile.arrayBuffer();
+
+  fileName.value = `noexif_${uploadedFile.name}`;
+  status.value = 'processing';
+  try {
+    const inStream = MemoryStream.createReadStream(Buffer.from(fileBuffer));
+    const outStream = MemoryStream.createWriteStream();
+    const trans = new ExifTransformer();
+    await new Promise((resolve, _reject) => {
+      inStream.pipe(trans).pipe(outStream).on('finish', () => resolve(true));
+    });
+
+    const outFileBuffer = (outStream as ToBufferMemoryStream).toBuffer();
+    base64OutputFile.value = `data:image/File;base64,${Base64.fromUint8Array(outFileBuffer)}`;
+    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 a Image file here, or click to select a file" accept="image/*" @file-upload="onFileUploaded" />
+      </div>
+    </div>
+
+    <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>