diff --git a/package.json b/package.json index 9f39ff1d..7d781d58 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/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/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', diff --git a/src/utils/ascii-lang-utils.ts b/src/utils/ascii-lang-utils.ts new file mode 100644 index 00000000..e59666b3 --- /dev/null +++ b/src/utils/ascii-lang-utils.ts @@ -0,0 +1,55 @@ +function escapeXml(unsafe: string) { + return unsafe.replace(/[<>&'"]/g, (c: string) => { + switch (c) { + case '<': return '<'; + case '>': return '>'; + case '&': return '&'; + case '\'': return '''; + case '"': return '"'; + } + return c; + }); +} + +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; +}