Merge branch 'feat/image-ascii-art' into chore/all-my-stuffs

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

Author: sharevb

package.json

@@ -195,6 +195,7 @@
     "ical.js": "^2.0.1",
     "js-base64": "^3.7.7",
     "js-beautify": "^1.15.1",
+    "image-to-ascii-art": "^0.0.4",
     "json5": "^2.2.3",
     "jsonpath": "^1.1.1",
     "jsonar-mod": "^1.9.0",

pnpm-lock.yaml

@@ -0,0 +1,25 @@
+declare module 'image-to-ascii-art' {
+    interface ConfigInterface {
+        // the integer of pixels drawn on the canvas.
+        // it sets bigger,the generated ascii art will be more detailed.
+        // it has two type to set:
+        //    1. (0, 1] decimal.result is that this number multiplied by the number of pixels in the original image
+        //    2. An integer greater than 1.
+        drawWidth?: number;
+        drawHeight?: number;
+        // the integer that pick one for every how many pixels.
+        // it must be an integer greater than 0.
+        pickDensityHorizontal?: number;
+        pickDensityVertical?: number;
+        // set the char of every grey range.
+        greyRangeChar?: GreyRangeChar[];
+        // if a grey value can't match one of the 'greyRangeChar' config,use this char.
+        defaultGreyChar?: string;
+    }
+
+    class ImageToAsciiArt {
+        constructor({ canvas, config = {} }: { canvas?: HTMLCanvasElement; config?: ConfigInterface } = {})
+        public convert(image: string | HTMLImageElement): Promise<string>
+        public destroy(): void
+    }
+}

src/tools/image-to-ascii-art/image-to-ascii-art.d.ts

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ImageToAsciiArt } from 'image-to-ascii-art';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { languages, translateToLanguage } from '@/utils/ascii-lang-utils';
+
+const inputBase64 = ref('');
+const language = useStorage('image-to-ascii-art:language', 'raw');
+const scale = ref(100);
+const errored = ref(false);
+const processing = ref(false);
+
+function toBase64(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result?.toString() ?? '');
+    reader.onerror = error => reject(error);
+  });
+}
+
+const languagesOptions = languages.map(lang => ({ value: lang.id, label: lang.name }));
+
+const output = computedAsync(async () => {
+  const inputBase64Value = inputBase64.value;
+  if (!inputBase64Value) {
+    return '';
+  }
+  const scaleValue = scale.value / 100.0;
+  const languageValue = language.value;
+
+  let outputValue = '';
+  processing.value = true;
+  try {
+    errored.value = false;
+
+    const imageToAsciiArt = new ImageToAsciiArt({
+      config: {
+        drawWidth: scaleValue,
+        drawHeight: scaleValue * 0.4,
+      },
+    });
+    outputValue = translateToLanguage(await imageToAsciiArt.convert(inputBase64Value), languageValue);
+    imageToAsciiArt.destroy();
+  }
+  catch (e) {
+    errored.value = true;
+  }
+  processing.value = false;
+
+  return outputValue;
+});
+
+async function onFileUploaded(uploadedFile: File) {
+  inputBase64.value = await toBase64(uploadedFile);
+}
+</script>
+
+<template>
+  <c-card style="max-width: 600px;">
+    <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"
+          paste-image
+          @file-upload="onFileUploaded"
+        />
+      </div>
+    </div>
+
+    <n-form-item label="Output scale" label-placement="left" mt-2>
+      <n-slider v-model:value="scale" :step="1" :min="1" :max="100" mr-2 />
+      <n-input-number v-model:value="scale" size="small" :min="1" :max="100" />
+    </n-form-item>
+
+    <c-select v-model:value="language" :options="languagesOptions" searchable mt-3 />
+
+    <n-divider />
+
+    <div v-if="processing" flex items-center justify-center>
+      <n-spin size="medium" />
+      <span class="ml-2">Processing...</span>
+    </div>
+
+    <c-alert v-if="errored" mt-1 text-center type="error">
+      Current settings resulted in error.
+    </c-alert>
+
+    <n-form-item v-if="!processing && !errored" label="Ascii Art text:">
+      <TextareaCopyable
+        :value="output"
+        mb-1 mt-1
+        copy-placement="outside"
+      />
+    </n-form-item>
+  </c-card>
+</template>
+
+<style lang="less">
+.n-code pre {
+  font-size: 0.2em !important;
+}
+</style>

src/tools/image-to-ascii-art/image-to-ascii-art.vue

@@ -0,0 +1,12 @@
+import { Artboard } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Image to ASCII Art',
+  path: '/image-to-ascii-art',
+  description: 'Image to ASCII Art Generator',
+  keywords: ['image', 'ascii', 'art'],
+  component: () => import('./image-to-ascii-art.vue'),
+  icon: Artboard,
+  createdAt: new Date('2024-03-15'),
+});

src/tools/image-to-ascii-art/index.ts

@@ -116,6 +116,7 @@ import { tool as ecdsaKeyPairGenerator } from './ecdsa-key-pair-generator';
 import { tool as ed25519KeyPairGenerator } from './ed25519-key-pair-generator';
 import { tool as fileType } from './file-type';
 import { tool as htmlCleaner } from './html-cleaner';
+import { tool as imageToAsciiArt } from './image-to-ascii-art';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -347,6 +348,7 @@ export const toolsByCategory: ToolCategory[] = [
       svgPlaceholderGenerator,
       cameraRecorder,
       removeExif,
+      imageToAsciiArt,
     ],
   },
   {