From d37be2792f65c0150fe161ce37916100434d3759 Mon Sep 17 00:00:00 2001 From: sharevb Date: Wed, 3 Apr 2024 23:08:31 +0200 Subject: [PATCH 1/3] feat(new tool): Image to ASCII Art Image to ASCII Art --- package.json | 1 + .../image-to-ascii-art/image-to-ascii-art.vue | 102 ++++++++++++++++++ src/tools/image-to-ascii-art/index.ts | 12 +++ src/tools/index.ts | 9 +- 4 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 src/tools/image-to-ascii-art/image-to-ascii-art.vue create mode 100644 src/tools/image-to-ascii-art/index.ts diff --git a/package.json b/package.json index fd6c02e6..12df52de 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "highlight.js": "^11.7.0", "iarna-toml-esm": "^3.0.5", "ibantools": "^4.3.3", + "image-to-ascii-art": "^0.0.4", "json5": "^2.2.3", "jwt-decode": "^3.1.2", "libphonenumber-js": "^1.10.28", diff --git a/src/tools/image-to-ascii-art/image-to-ascii-art.vue b/src/tools/image-to-ascii-art/image-to-ascii-art.vue new file mode 100644 index 00000000..c6b2ad63 --- /dev/null +++ b/src/tools/image-to-ascii-art/image-to-ascii-art.vue @@ -0,0 +1,102 @@ + + + + + diff --git a/src/tools/image-to-ascii-art/index.ts b/src/tools/image-to-ascii-art/index.ts new file mode 100644 index 00000000..2bd6fe25 --- /dev/null +++ b/src/tools/image-to-ascii-art/index.ts @@ -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'), +}); diff --git a/src/tools/index.ts b/src/tools/index.ts index aa861c93..0b43a8e1 100644 --- a/src/tools/index.ts +++ b/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 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'; @@ -132,7 +133,13 @@ export const toolsByCategory: ToolCategory[] = [ }, { name: 'Images and videos', - components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder], + components: [ + qrCodeGenerator, + wifiQrCodeGenerator, + svgPlaceholderGenerator, + cameraRecorder, + imageToAsciiArt, + ], }, { name: 'Development', From 756162f0e3c4a1e3bc1358bd576c40df7419f1c8 Mon Sep 17 00:00:00 2001 From: sharevb Date: Tue, 2 Apr 2024 09:00:01 +0200 Subject: [PATCH 2/3] feat(ASCII Art to Code): utility to format ASCII Art to code Handle ASCII Art to code conversion for Python, Bash, Powershell, C, C++, VB.Net, Node.js, HTML, Rust, Go, Ruby, PHP, Swift, Kotlin, SQL and Java --- src/utils/ascii-lang-utils.ts | 54 +++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 src/utils/ascii-lang-utils.ts diff --git a/src/utils/ascii-lang-utils.ts b/src/utils/ascii-lang-utils.ts new file mode 100644 index 00000000..83af3423 --- /dev/null +++ b/src/utils/ascii-lang-utils.ts @@ -0,0 +1,54 @@ +function escapeXml(unsafe: string) { + return unsafe.replace(/[<>&'"]/g, (c: string | undefined) => { + switch (c) { + case '<': return '<'; + case '>': return '>'; + case '&': return '&'; + case '\'': return '''; + case '"': return '"'; + } + }); +} + +const dontEscape = ''; +const escapeBackslash = '\\\\'; +const escapeSingleQuote = '\''; +const escapeDoubleQuote = '"'; +const defaultEscape = escapeBackslash + escapeSingleQuote + escapeDoubleQuote; +export const languages = [ + { id: 'raw', name: 'Raw Text', prefix: '', suffix: '', begin: '', end: '', escape: dontEscape }, + { id: 'bash', name: 'Bash', prefix: 'echo "', suffix: '"', begin: '', end: '', escape: escapeBackslash + escapeDoubleQuote }, + { id: 'pwsh', name: 'PowerShell', prefix: 'Write-Output \'', suffix: '\'', begin: '', end: '', escape: escapeBackslash + escapeSingleQuote }, + { id: 'c', name: 'C', prefix: 'printf("', suffix: '\\n");', begin: '#include \n', end: '', escape: defaultEscape }, + { id: 'cpp', name: 'C++', prefix: 'std::cout << "', suffix: '\\n";', begin: '#include \n', end: '', escape: defaultEscape }, + { id: 'csharp', name: 'C#', prefix: 'Console.WriteLine(@"', suffix: '");', begin: 'using System;\n', end: '', escape: escapeDoubleQuote }, + { id: 'vbnet', name: 'VB.Net', prefix: 'Console.WriteLine("', suffix: '")', begin: '', end: '', escape: (l: string) => l.replace('"', '""') }, + { id: 'node', name: 'Node.js', prefix: 'console.log("', suffix: '");', begin: '', end: '', escape: defaultEscape }, + { id: 'python', name: 'Python', prefix: 'print("', suffix: '")', begin: '', end: '', escape: escapeBackslash + escapeDoubleQuote }, + { id: 'html', name: 'HTML', prefix: '', suffix: '', begin: '
\n', end: '\n
', escape: (l: string) => escapeXml(l) }, + { id: 'rust', name: 'Rust', prefix: 'println!("', suffix: '");', begin: '', end: '', escape: defaultEscape }, + { id: 'go', name: 'Go', prefix: 'fmt.Println("', suffix: '")', begin: 'import "fmt"\n', end: '', escape: defaultEscape }, + { id: 'ruby', name: 'Ruby', prefix: 'puts "', suffix: '"', begin: '', end: '', escape: defaultEscape }, + { id: 'php', name: 'PHP', prefix: 'echo "', suffix: '\\n";', begin: '', escape: defaultEscape }, + { id: 'swift', name: 'Swift', prefix: 'print("', suffix: '")', begin: '', end: '', escape: defaultEscape }, + { id: 'kotlin', name: 'Kotlin', prefix: 'println("', suffix: '")', begin: '', end: '', escape: defaultEscape }, + { id: 'sql', name: 'SQL', prefix: 'SELECT \'', suffix: '\\n\'', begin: '', end: '', escape: (l: string) => l.replace('\'', '\'\'') }, + { id: 'java', name: 'Java', prefix: 'System.out.println("', suffix: '");', begin: '', end: '', escape: defaultEscape }, +]; +export function translateToLanguage(asciiArt: string, languageId: string) { + const langConfig = languages.find(l => l.id === languageId); + if (!langConfig) { + return asciiArt; + } + + const escape = typeof langConfig.escape === 'function' + ? langConfig.escape + : function (line: string) { + return langConfig.escape + ? line.replace(new RegExp(`([${langConfig.escape}])`, 'g'), '\\$1') + : line; + }; + return langConfig.begin + asciiArt.split('\n').map((line) => { + return langConfig.prefix + escape(line) + langConfig.suffix; + }).join('\n') + langConfig.end; +} From 1440c233318cec2150b474eaf03f30ad609e9b21 Mon Sep 17 00:00:00 2001 From: ShareVB Date: Sat, 20 Apr 2024 19:39:56 +0200 Subject: [PATCH 3/3] fix: missing module declaration, dependencies and some typing --- pnpm-lock.yaml | 19 +++++++++----- .../image-to-ascii-art.d.ts | 25 +++++++++++++++++++ src/utils/ascii-lang-utils.ts | 3 ++- 3 files changed, 40 insertions(+), 7 deletions(-) create mode 100644 src/tools/image-to-ascii-art/image-to-ascii-art.d.ts 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 + 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 '<'; case '>': return '>'; @@ -7,6 +7,7 @@ function escapeXml(unsafe: string) { case '\'': return '''; case '"': return '"'; } + return c; }); }