feat(new tool): QRCode decoder

Fix CorentinTh#656

Author: sharevb

package.json

@@ -78,6 +78,7 @@
     "pinia": "^2.0.34",
     "plausible-tracker": "^0.3.8",
     "qrcode": "^1.5.1",
+    "qrcode-parser": "^2.1.3",
     "sql-formatter": "^13.0.0",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",

pnpm-lock.yaml

@@ -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 textToUnicode } from './text-to-unicode';
+import { tool as qrCodeDecoder } from './qr-code-decoder';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -127,7 +128,13 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Images and videos',
-    components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
+    components: [
+      qrCodeGenerator,
+      wifiQrCodeGenerator,
+      qrCodeDecoder,
+      svgPlaceholderGenerator,
+      cameraRecorder,
+    ],
   },
   {
     name: 'Development',

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { Qrcode } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'QRCode decoder',
+  path: '/qr-code-decoder',
+  description: 'QR Code Reader',
+  keywords: ['qrcode', 'qr-code', 'decoder', 'reader'],
+  component: () => import('./qr-code-decoder.vue'),
+  icon: Qrcode,
+  createdAt: new Date('2024-01-17'),
+});

src/tools/qr-code-decoder/index.ts

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import qrcodeParser from 'qrcode-parser';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const fileInput = ref() as Ref<File>;
+const qrCode = computedAsync(async () => {
+  try {
+    return (await qrcodeParser(fileInput.value));
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+
+async function onUpload(file: File) {
+  if (file) {
+    fileInput.value = file;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <c-file-upload
+      title="Drag and drop a QR Code here, or click to select a file"
+      :paste-image="true"
+      @file-upload="onUpload"
+    />
+
+    <n-divider />
+
+    <div>
+      <h3>Decoded</h3>
+      <TextareaCopyable
+        :value="qrCode"
+        :word-wrap="true"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+::v-deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>