diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd6c38c9..637c0508 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,6 +92,9 @@ dependencies:
   ibantools:
     specifier: ^4.3.3
     version: 4.3.3
+  image-to-ascii-art:
+    specifier: ^0.0.4
+    version: 0.0.4
   json5:
     specifier: ^2.2.3
     version: 2.2.3
@@ -3351,7 +3354,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.7.2(vue@3.3.4)
+      '@vueuse/shared': 10.9.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -3993,10 +3996,10 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.7.2(vue@3.3.4):
-    resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
+  /@vueuse/shared@10.9.0(vue@3.3.4):
+    resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.7(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6124,6 +6127,10 @@ packages:
     dev: true
     optional: true
 
+  /image-to-ascii-art@0.0.4:
+    resolution: {integrity: sha512-MvY8f2zQv8oAMdxK7908Y+JMan7bsUaSQKS/lHRJwzATyQyvoE4MCJXeqFMNxmFUWcxPqpD1ioqOUvR1peZzuA==}
+    dev: false
+
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -9151,8 +9158,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.6(vue@3.3.4):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+  /vue-demi@0.14.7(vue@3.3.4):
+    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
diff --git a/src/tools/image-to-ascii-art/image-to-ascii-art.d.ts b/src/tools/image-to-ascii-art/image-to-ascii-art.d.ts
new file mode 100644
index 00000000..c2c276c4
--- /dev/null
+++ b/src/tools/image-to-ascii-art/image-to-ascii-art.d.ts
@@ -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
+    }
+}
\ No newline at end of file
diff --git a/src/utils/ascii-lang-utils.ts b/src/utils/ascii-lang-utils.ts
index 83af3423..e59666b3 100644
--- a/src/utils/ascii-lang-utils.ts
+++ b/src/utils/ascii-lang-utils.ts
@@ -1,5 +1,5 @@
 function escapeXml(unsafe: string) {
-  return unsafe.replace(/[<>&'"]/g, (c: string | undefined) => {
+  return unsafe.replace(/[<>&'"]/g, (c: string) => {
     switch (c) {
       case '<': return '&lt;';
       case '>': return '&gt;';
@@ -7,6 +7,7 @@ function escapeXml(unsafe: string) {
       case '\'': return '&apos;';
       case '"': return '&quot;';
     }
+    return c;
   });
 }