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>