当前位置:首页 > JavaScript

js实现ascii图

2026-02-03 05:30:43JavaScript

ASCII 图生成方法

使用 JavaScript 生成 ASCII 图可以通过多种方式实现,以下是几种常见的方法:

使用字符串拼接 通过拼接字符和换行符直接构建 ASCII 图形:

const asciiArt = `
  /\\_/\\
 ( o.o )
  > ^ <
`;
console.log(asciiArt);

动态生成 ASCII 图形 对于需要程序化生成的图形,可以使用循环和条件判断:

function generatePyramid(height) {
  let pyramid = '';
  for (let i = 0; i < height; i++) {
    pyramid += ' '.repeat(height - i - 1) + '*'.repeat(2 * i + 1) + '\n';
  }
  return pyramid;
}
console.log(generatePyramid(5));

使用 ASCII 艺术库 第三方库如 figlet.js 可以生成更复杂的 ASCII 艺术:

const figlet = require('figlet');
figlet.text('Hello', (err, data) => {
  if (err) throw err;
  console.log(data);
});

转换图像为 ASCII 图

将普通图像转换为 ASCII 图需要以下步骤:

1. 加载图像数据 使用 Canvas API 获取图像像素数据:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  convertToAscii(imageData);
};
img.src = 'image.png';

2. 像素到 ASCII 字符映射 根据亮度值选择对应字符:

function convertToAscii(imageData) {
  const chars = ['@', '#', 'S', '%', '?', '*', '+', ';', ':', ',', '.'];
  let ascii = '';

  for (let y = 0; y < imageData.height; y++) {
    for (let x = 0; x < imageData.width; x++) {
      const index = (y * imageData.width + x) * 4;
      const r = imageData.data[index];
      const g = imageData.data[index + 1];
      const b = imageData.data[index + 2];
      const brightness = (r + g + b) / 3 / 255;
      const charIndex = Math.floor(brightness * (chars.length - 1));
      ascii += chars[charIndex];
    }
    ascii += '\n';
  }
  console.log(ascii);
}

优化 ASCII 图显示

调整字符密度 使用不同密度的字符集可以获得更好的视觉效果:

const denseChars = "@%#*+=-:. ";
const sparseChars = "@*+-. ";

添加颜色 在支持 ANSI 颜色的终端中添加颜色:

console.log('\x1b[36m' + asciiArt + '\x1b[0m');

控制宽高比 由于字符高度大于宽度,需要调整比例:

const aspectRatio = 0.5; // 字符高宽比
const scaledWidth = Math.floor(imageData.width * aspectRatio);

这些方法可以根据具体需求组合使用,生成各种复杂度的 ASCII 图形。

js实现ascii图

标签: jsascii
分享给朋友:

相关文章

js实现倒计时

js实现倒计时

使用 setInterval 实现倒计时 通过 setInterval 定时器每秒更新剩余时间,适用于简单倒计时场景。 function countdown(seconds, callback)…

js实现打印

js实现打印

使用window.print()方法实现打印 在JavaScript中,可以通过调用window.print()方法直接触发浏览器的打印功能。这会打开系统的打印对话框,用户可以选择打印机和设置打印选项…

js 实现倒计时

js 实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是两种常见实现方式。 使用 setInterval…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-contain…

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

jquery.js

jquery.js

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互等操作。以下是关于 jQuery.js 的核心信息和使用方法: 获取…