当前位置：首页 > backend >正文

字符画生成（伟大的CSDN）

backend 2025/5/21 10:16:34

自从来到了CSDN，便开始有了写博客的习惯，也是大家的关注，才让我意识到了知识产出的价值，我非常热爱这个平台，他让我感觉到了不同的文化信息的交流和碰撞，让我在工作和生活中无限进步。现在我开源我写的文字转字符代码，可以将文字转换为字符进行显示

我们先来看看效果

```js
-...-----.-...--/-..----...-....-/-.-./.../-../-./--------....--../-.-.-.-.--..-.-/-..-....------.-/--..-.-..--.--./-...--.-..---..-/--------....--../-.----..-------/-.-.-...-..-.-./-.--..-...--.-./-..---..-.-----/-.---....--...-/-.-------..--.-/-..---.-....--./--------....--../-...------.--.../-......----.-.-./-.-..-.-.-.-.../-.-----......../...-/../.--./--..-.--....---/----.-.---...../--------....--../--...-....-...-/--.--...-....-./-..----.--...../------.--.--..-/--...-....-...-/-.-----......../-..---.-....--./--------...-----/--....-------./-.--./-.......-...-./---.-.-..-/-.......-...-./--...../-.--.-/---/--...-.--.---../--...-.--.---../--------....--../-.-...--...--.-/-..---..-.-----/-..---.....--.-/-..----...--.-./--..--.----.-../--..-.--.--..../-..---........./----.----...---/-.-..--.-.--.-./-.--.---.-...-./-..---.-....--./--------....--../--...-....-...-/-.-..---.---.--/-.-..--.-.--.-./-.--.---.-...-./-.-.--.---.--.-/-..---.-....--./--------....--../-.-.-......--../-.-.-......--.-/-.---......----/-..----...--..-/-..----..--.-../-...-.---.--..../-.------..-.---
```
附上源码
```js
function textToAscii(text) {
// 创建一个canvas来绘制文字并获取像素数据
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 设置canvas大小（根据文字长度调整）
const fontSize = 16;
canvas.width = text.length * fontSize;
canvas.height = fontSize * 2;

// 绘制文字
ctx.fillStyle = 'black';
ctx.font = `${fontSize}px Arial`;
ctx.fillText(text, 0, fontSize);

// 获取像素数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

let asciiArt = '';

// 遍历像素数据，转换为字符
for (let y = 0; y < canvas.height; y += 2) { // 跳行以保持比例
for (let x = 0; x < canvas.width; x += 1) {
const index = (y * canvas.width + x) * 4;
const r = data[index];
const g = data[index + 1];
const b = data[index + 2];

// 计算亮度
const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;

// 根据亮度选择字符
const charIndex = Math.floor(brightness * (densityChars.length - 1));
asciiArt += densityChars[charIndex];
}
asciiArt += '\n';
}

return asciiArt;
}

```