ASCII 艺术字生成器(使用 figlet.js)
🏷️ 工具
使用
figlet.js
实现将文字转换为 ASCII 艺术字。
本站地址
html
<div class="input-group mb-3">
<label class="input-group-text" for="font">字体</label>
<select class="form-select" id="font">
<option value="Standard" selected>Standard</option>
<option value="1Row">1Row</option>
<option value="3-D">3-D</option>
<option value="3D Diagonal">3D Diagonal</option>
<option value="3D-ASCII">3D-ASCII</option>
<option value="3x5">3x5</option>
<option value="4Max">4Max</option>
<option value="5 Line Oblique">5 Line Oblique</option>
<option value="Acrobatic">Acrobatic</option>
<option value="Alligator">Alligator</option>
<option value="Alligator2">Alligator2</option>
<option value="Alpha">Alpha</option>
<option value="Alphabet">Alphabet</option>
<option value="AMC 3 Line">AMC 3 Line</option>
<option value="AMC 3 Liv1">AMC 3 Liv1</option>
<option value="AMC AAA01">AMC AAA01</option>
<option value="AMC Neko">AMC Neko</option>
<option value="AMC Razor">AMC Razor</option>
<option value="AMC Razor2">AMC Razor2</option>
<option value="AMC Slash">AMC Slash</option>
<option value="AMC Slider">AMC Slider</option>
<option value="AMC Thin">AMC Thin</option>
<option value="AMC Tubes">AMC Tubes</option>
<option value="AMC Untitled">AMC Untitled</option>
<option value="ANSI Regular">ANSI Regular</option>
<option value="ANSI Shadow">ANSI Shadow</option>
<option value="Arrows">Arrows</option>
<option value="ASCII New Roman">ASCII New Roman</option>
<option value="Avatar">Avatar</option>
<option value="B1FF">B1FF</option>
<option value="Banner">Banner</option>
<option value="Banner3-D">Banner3-D</option>
<option value="Banner3">Banner3</option>
<option value="Banner4">Banner4</option>
<option value="Barbwire">Barbwire</option>
<option value="Basic">Basic</option>
<option value="Bear">Bear</option>
<option value="Bell">Bell</option>
<option value="Benjamin">Benjamin</option>
<option value="Big Chief">Big Chief</option>
<option value="Big Money-ne">Big Money-ne</option>
<option value="Big Money-nw">Big Money-nw</option>
<option value="Big Money-se">Big Money-se</option>
<option value="Big Money-sw">Big Money-sw</option>
<option value="Big">Big</option>
<option value="Bigfig">Bigfig</option>
<option value="Binary">Binary</option>
<option value="Block">Block</option>
<option value="Blocks">Blocks</option>
<option value="Bloody">Bloody</option>
<option value="Bolger">Bolger</option>
<option value="Braced">Braced</option>
<option value="Bright">Bright</option>
<option value="Broadway KB">Broadway KB</option>
<option value="Broadway">Broadway</option>
<option value="Bubble">Bubble</option>
<option value="Bulbhead">Bulbhead</option>
<option value="Caligraphy">Caligraphy</option>
<option value="Caligraphy2">Caligraphy2</option>
<option value="Calvin S">Calvin S</option>
<option value="Cards">Cards</option>
<option value="Catwalk">Catwalk</option>
<option value="Chiseled">Chiseled</option>
<option value="Chunky">Chunky</option>
<option value="Coinstak">Coinstak</option>
<option value="Cola">Cola</option>
<option value="Colossal">Colossal</option>
<option value="Computer">Computer</option>
<option value="Contessa">Contessa</option>
<option value="Contrast">Contrast</option>
<option value="Cosmike">Cosmike</option>
<option value="Crawford">Crawford</option>
<option value="Crawford2">Crawford2</option>
<option value="Crazy">Crazy</option>
<option value="Cricket">Cricket</option>
<option value="Cursive">Cursive</option>
<option value="Cyberlarge">Cyberlarge</option>
<option value="Cybermedium">Cybermedium</option>
<option value="Cybersmall">Cybersmall</option>
<option value="Cygnet">Cygnet</option>
<option value="DANC4">DANC4</option>
<option value="Dancing Font">Dancing Font</option>
<option value="Decimal">Decimal</option>
<option value="Def Leppard">Def Leppard</option>
<option value="Delta Corps Priest 1">Delta Corps Priest 1</option>
<option value="Diamond">Diamond</option>
<option value="Diet Cola">Diet Cola</option>
<option value="Digital">Digital</option>
<option value="Doh">Doh</option>
<option value="Doom">Doom</option>
<option value="DOS Rebel">DOS Rebel</option>
<option value="Dot Matrix">Dot Matrix</option>
<option value="Double Shorts">Double Shorts</option>
<option value="Double">Double</option>
<option value="Dr Pepper">Dr Pepper</option>
<option value="DWhistled">DWhistled</option>
<option value="Efti Chess">Efti Chess</option>
<option value="Efti Font">Efti Font</option>
<option value="Efti Italic">Efti Italic</option>
<option value="Efti Piti">Efti Piti</option>
<option value="Efti Robot">Efti Robot</option>
<option value="Efti Wall">Efti Wall</option>
<option value="Efti Water">Efti Water</option>
<option value="Electronic">Electronic</option>
<option value="Elite">Elite</option>
<option value="Epic">Epic</option>
<option value="Fender">Fender</option>
<option value="Filter">Filter</option>
<option value="Fire Font-k">Fire Font-k</option>
<option value="Fire Font-s">Fire Font-s</option>
<option value="Flipped">Flipped</option>
<option value="Flower Power">Flower Power</option>
<option value="Four Tops">Four Tops</option>
<option value="Fraktur">Fraktur</option>
<option value="Fun Face">Fun Face</option>
<option value="Fun Faces">Fun Faces</option>
<option value="Fuzzy">Fuzzy</option>
<option value="Georgi16">Georgi16</option>
<option value="Georgia11">Georgia11</option>
<option value="Ghost">Ghost</option>
<option value="Ghoulish">Ghoulish</option>
<option value="Glenyn">Glenyn</option>
<option value="Goofy">Goofy</option>
<option value="Gothic">Gothic</option>
<option value="Graceful">Graceful</option>
<option value="Gradient">Gradient</option>
<option value="Graffiti">Graffiti</option>
<option value="Greek">Greek</option>
<option value="Heart Left">Heart Left</option>
<option value="Heart Right">Heart Right</option>
<option value="Henry 3D">Henry 3D</option>
<option value="Hex">Hex</option>
<option value="Hieroglyphs">Hieroglyphs</option>
<option value="Hollywood">Hollywood</option>
<option value="Horizontal Left">Horizontal Left</option>
<option value="Horizontal Right">Horizontal Right</option>
<option value="ICL-1900">ICL-1900</option>
<option value="Impossible">Impossible</option>
<option value="Invita">Invita</option>
<option value="Isometric1">Isometric1</option>
<option value="Isometric2">Isometric2</option>
<option value="Isometric3">Isometric3</option>
<option value="Isometric4">Isometric4</option>
<option value="Italic">Italic</option>
<option value="Ivrit">Ivrit</option>
<option value="Jacky">Jacky</option>
<option value="Jazmine">Jazmine</option>
<option value="Jerusalem">Jerusalem</option>
<option value="JS Block Letters">JS Block Letters</option>
<option value="JS Bracket Letters">JS Bracket Letters</option>
<option value="JS Capital Curves">JS Capital Curves</option>
<option value="JS Cursive">JS Cursive</option>
<option value="JS Stick Letters">JS Stick Letters</option>
<option value="Katakana">Katakana</option>
<option value="Kban">Kban</option>
<option value="Keyboard">Keyboard</option>
<option value="Knob">Knob</option>
<option value="Konto Slant">Konto Slant</option>
<option value="Konto">Konto</option>
<option value="Larry 3D 2">Larry 3D 2</option>
<option value="Larry 3D">Larry 3D</option>
<option value="LCD">LCD</option>
<option value="Lean">Lean</option>
<option value="Letters">Letters</option>
<option value="Lil Devil">Lil Devil</option>
<option value="Line Blocks">Line Blocks</option>
<option value="Linux">Linux</option>
<option value="Lockergnome">Lockergnome</option>
<option value="Madrid">Madrid</option>
<option value="Marquee">Marquee</option>
<option value="Maxfour">Maxfour</option>
<option value="Merlin1">Merlin1</option>
<option value="Merlin2">Merlin2</option>
<option value="Mike">Mike</option>
<option value="Mini">Mini</option>
<option value="Mirror">Mirror</option>
<option value="Mnemonic">Mnemonic</option>
<option value="Modular">Modular</option>
<option value="Morse">Morse</option>
<option value="Morse2">Morse2</option>
<option value="Moscow">Moscow</option>
<option value="Mshebrew210">Mshebrew210</option>
<option value="Muzzle">Muzzle</option>
<option value="Nancyj-Fancy">Nancyj-Fancy</option>
<option value="Nancyj-Improved">Nancyj-Improved</option>
<option value="Nancyj-Underlined">Nancyj-Underlined</option>
<option value="Nancyj">Nancyj</option>
<option value="Nipples">Nipples</option>
<option value="NScript">NScript</option>
<option value="NT Greek">NT Greek</option>
<option value="NV Script">NV Script</option>
<option value="O8">O8</option>
<option value="Octal">Octal</option>
<option value="Ogre">Ogre</option>
<option value="Old Banner">Old Banner</option>
<option value="OS2">OS2</option>
<option value="Pagga">Pagga</option>
<option value="Patorjk's Cheese">Patorjk's Cheese</option>
<option value="Patorjk-HeX">Patorjk-HeX</option>
<option value="Pawp">Pawp</option>
<option value="Peaks Slant">Peaks Slant</option>
<option value="Peaks">Peaks</option>
<option value="Pebbles">Pebbles</option>
<option value="Pepper">Pepper</option>
<option value="Poison">Poison</option>
<option value="Puffy">Puffy</option>
<option value="Puzzle">Puzzle</option>
<option value="Pyramid">Pyramid</option>
<option value="Rammstein">Rammstein</option>
<option value="Rectangles">Rectangles</option>
<option value="Red Phoenix">Red Phoenix</option>
<option value="Relief">Relief</option>
<option value="Relief2">Relief2</option>
<option value="Reverse">Reverse</option>
<option value="Roman">Roman</option>
<option value="Rot13">Rot13</option>
<option value="Rotated">Rotated</option>
<option value="Rounded">Rounded</option>
<option value="Rowan Cap">Rowan Cap</option>
<option value="Rozzo">Rozzo</option>
<option value="Runic">Runic</option>
<option value="Runyc">Runyc</option>
<option value="S Blood">S Blood</option>
<option value="Santa Clara">Santa Clara</option>
<option value="Script">Script</option>
<option value="Serifcap">Serifcap</option>
<option value="Shadow">Shadow</option>
<option value="Shimrod">Shimrod</option>
<option value="Short">Short</option>
<option value="SL Script">SL Script</option>
<option value="Slant Relief">Slant Relief</option>
<option value="Slant">Slant</option>
<option value="Slide">Slide</option>
<option value="Small Caps">Small Caps</option>
<option value="Small Isometric1">Small Isometric1</option>
<option value="Small Keyboard">Small Keyboard</option>
<option value="Small Poison">Small Poison</option>
<option value="Small Script">Small Script</option>
<option value="Small Shadow">Small Shadow</option>
<option value="Small Slant">Small Slant</option>
<option value="Small Tengwar">Small Tengwar</option>
<option value="Small">Small</option>
<option value="Soft">Soft</option>
<option value="Speed">Speed</option>
<option value="Spliff">Spliff</option>
<option value="Stacey">Stacey</option>
<option value="Stampate">Stampate</option>
<option value="Stampatello">Stampatello</option>
<option value="Star Strips">Star Strips</option>
<option value="Star Wars">Star Wars</option>
<option value="Stellar">Stellar</option>
<option value="Stforek">Stforek</option>
<option value="Stick Letters">Stick Letters</option>
<option value="Stop">Stop</option>
<option value="Straight">Straight</option>
<option value="Stronger Than All">Stronger Than All</option>
<option value="Sub-Zero">Sub-Zero</option>
<option value="Swamp Land">Swamp Land</option>
<option value="Swan">Swan</option>
<option value="Sweet">Sweet</option>
<option value="Tanja">Tanja</option>
<option value="Tengwar">Tengwar</option>
<option value="Term">Term</option>
<option value="Test1">Test1</option>
<option value="The Edge">The Edge</option>
<option value="Thick">Thick</option>
<option value="Thin">Thin</option>
<option value="THIS">THIS</option>
<option value="Thorned">Thorned</option>
<option value="Three Point">Three Point</option>
<option value="Ticks Slant">Ticks Slant</option>
<option value="Ticks">Ticks</option>
<option value="Tiles">Tiles</option>
<option value="Tinker-Toy">Tinker-Toy</option>
<option value="Tombstone">Tombstone</option>
<option value="Train">Train</option>
<option value="Trek">Trek</option>
<option value="Tsalagi">Tsalagi</option>
<option value="Tubular">Tubular</option>
<option value="Twisted">Twisted</option>
<option value="Two Point">Two Point</option>
<option value="Univers">Univers</option>
<option value="USA Flag">USA Flag</option>
<option value="Varsity">Varsity</option>
<option value="Wavy">Wavy</option>
<option value="Weird">Weird</option>
<option value="Wet Letter">Wet Letter</option>
<option value="Whimsy">Whimsy</option>
<option value="Wow">Wow</option>
</select>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="hLayout">水平布局</label>
<select class="form-select" id="hLayout">
<option value="default">Default</option>
<option value="full" selected>Full</option>
<option value="fitted">Fitted</option>
<option value="controlled smushing">Controlled Smushing</option>
<option value="universal smushing">Universal Smushing</option>
</select>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="vLayout">垂直布局</label>
<select class="form-select" id="vLayout">
<option value="default" selected>Default</option>
<option value="full">Full</option>
<option value="fitted" selected>Fitted</option>
<option value="controlled smushing">Controlled Smushing</option>
<option value="universal smushing">Universal Smushing</option>
</select>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="width">宽度</label>
<select class="form-select" id="width">
<option value="none" selected>none</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="100">100</option>
</select>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="whitespaceBreak">空白处中断(如果设置了宽度)</label>
<select class="form-select" id="whitespaceBreak">
<option value="false" selected>false</option>
<option value="true">true</option>
</select>
</div>
<div class="input-group mb-3">
<label class="input-group-text bg-primary text-white" for="inputText">输入</label>
<textarea class="form-control" id="inputText">test
123</textarea>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="outputFigDisplay">输出</label>
<pre class="form-control" id="outputFigDisplay" style="margin-top: 0;margin-bottom: 0;">0000000000111111111122222222223333333333444444444455555555556666666666777777777788888888889999999999</pre>
<button id="copy" class="btn btn-primary" type="button">复制</button>
</div>
<script>
import figlet from "figlet";
var currentResult = "";
if (window.location.protocol === "file:") {
alert("fetch APi does not support file: protocol.");
}
figlet.defaults({
fontPath: "/scripts/figlet/1.6.0/fonts",
});
figlet.preloadFonts(["Standard", "Ghost"], function () {
console.log("prefetching done (only did it for 2 fonts)!");
});
/*
Generates the put
*/
var update = function () {
var fontName = document.querySelector("#font option:checked").value,
inputText = document.querySelector("#inputText").value,
vLayout = document.querySelector("#vLayout option:checked").value,
hLayout = document.querySelector("#hLayout option:checked").value,
width = document.querySelector("#width option:checked").value,
whitespaceBreak = document.querySelector("#whitespaceBreak option:checked").value;
/*
How to use the text output.
The below call could also have been: figlet.text(...
*/
figlet(
inputText,
{
font: fontName,
horizontalLayout: hLayout,
verticalLayout: vLayout,
width: width === "none" ? undefined : width,
whitespaceBreak:
width === "none"
? undefined
: whitespaceBreak === "true"
? true
: false,
},
function (err, text) {
if (err) {
console.log("something went wrong...");
console.dir(err);
return;
}
console.log(fontName);
console.log(text);
document.querySelector("#outputFigDisplay").innerHTML = text;
currentResult = text;
}
);
/*
How to read the metadata for a font
*/
/*
figlet.metadata(fontName, function(err, options, headerComment) {
if (err) {
console.log('something went wrong...');
console.dir(err);
return;
}
console.dir(options);
console.log(headerComment);
});
*/
};
/*
GUI Controls
*/
console.log('document === ', document);
document.querySelector("#hLayout").addEventListener("change", update);
document.querySelector("#vLayout").addEventListener("change", update);
document.querySelector("#font").addEventListener("change", update);
document.querySelector("#inputText").addEventListener("keyup", update);
document.querySelector("#width").addEventListener("change", update);
document.querySelector("#whitespaceBreak").addEventListener("change", update);
document.querySelector("#copy").addEventListener("click", () => copyToClip(currentResult, "复制成功"));
update(); // init
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440