Merge branch 'feat/removeexif' into chore/all-my-stuffs

# Conflicts:
#	components.d.ts
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts
#	vite.config.ts

Author: sharevb

package.json

@@ -85,6 +85,7 @@
     "@types/punycode": "^2.1.4",
     "@types/figlet": "^1.5.8",
     "@types/markdown-it": "^13.0.7",
+    "@types/memorystream": "^0.3.4",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.11.1",
@@ -121,6 +122,7 @@
     "email-normalizer": "^1.0.0",
     "emojilib": "^3.0.10",
     "fast_array_intersect": "^1.1.0",
+    "exif-be-gone": "^1.5.1",
     "figlet": "^1.7.0",
     "figue": "^1.2.0",
     "flatten-anything": "^4.0.1",
@@ -169,6 +171,7 @@
     "markdown-it": "^14.0.0",
     "marked": "^10.0.0",
     "mathjs": "^11.9.1",
+    "memorystream": "^0.3.1",
     "mime-types": "^2.1.35",
     "monaco-editor": "^0.43.0",
     "naive-ui": "^2.35.0",

pnpm-lock.yaml

@@ -49,6 +49,7 @@ import { tool as ipGeoLocation } from './ip-geo-location';
 import { tool as ocrImage } from './ocr-image';
 import { tool as safelinkDecoder } from './safelink-decoder';
 import { tool as mongoObjectidConverter } from './mongo-objectid-converter';
+import { tool as removeExif } from './remove-exif';
 import { tool as xmlToJson } from './xml-to-json';
 import { tool as jsonToXml } from './json-to-xml';
 import { tool as regexTester } from './regex-tester';
@@ -271,6 +272,7 @@ export const toolsByCategory: ToolCategory[] = [
       qrCodeDecoder,
       svgPlaceholderGenerator,
       cameraRecorder,
+      removeExif,
     ],
   },
   {

src/tools/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/index.ts

@@ -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>