char-dust 一个图片转字符画的 npm 包与示例站点

如题，它的全部作用就是将图片变成字符画（又称 ASCII 艺术）。

GitHub: https://github.com/YunYouJun/char-dust/
示例站点: https://www.yunyoujun.cn/char-dust/

似乎有些老生常谈，那么为什么会有它的诞生呢？

Why char-dust?

有一部电影叫做「星尘 Stardust」，名字挺酷。

~~星尘龙（游戏王） Stardust Dragon~~
~~星尘斗士（JOJO） Stardust Crusaders~~
~~「与星尘握手」命运石之门~~

字符（char）尘埃（dust）= 字尘（char-dust）

「星尘」是恒星死亡时在太空中形成微小颗粒般的固体物质，它们飘散在宇宙中，继续碰撞、凝结，甚至会因此诞生出新的恒星。

是死亡，也是新生。既渺小，又伟大。

我相当喜欢这个名字，也因此将其命名为 char-dust。

那么乍看似乎已经有些被玩烂的东西，为啥又要重复造轮子呢？（当然其实最重要的原因在后话里。）

Features

可自定义的图片大小
可自定义的字符串
线上方便快捷
- 可自定义缩放 textarea
- 方便全选复制
兼容 node 与 browser 的 npm 包
TypeScript 类型

代码语言：javascript复制

npm install char-dust

首先，虽然各类语言都能实现类似的效果，但是想要拿到前端展示，那么必须得用万能的 JavaScript，其次想要使其变成方便使用且带声明的包，就得用无敌的 TypeScript。

Google 甚至还有一个专门的 repo gif-for-cli。

思路

虽然有把过程步骤详细介绍讲解的想法，但苦于杂务繁多，不妨鸽到日后再说（没错，我就是懒）。

思路其实很简单，将图片读到 canvas 上，获取 ImageData，读取像素，通过 RGB 计算出灰度（亮度）。

RGB 转灰度有一个专门的心理学公式（至于为什么就只能请您移步 Grayscale 了）

R cdot 0.299 G cdot 0.587 B cdot 0.114 = Brightness

代码写久了，会有一种想要将各功能都抽象的强迫症。专门处理色彩的类库也必然是有的，于是我改为使用 tinycolor 获取亮度。

拿到亮度后，我们再定义一串字符串来分配给不同的亮度。譬如从暗到亮分别为 @#&$�3!i1uazvno~;*^ -. 。（当然其他也完全可以）

均分亮度，得到不同等级，根据每个像素分配对于亮度级别的字符即可。

此外，图片很大的时候，对每个像素处理无疑是很慢的，我们可以设置一个字符宽度来跳着处理，间隔的像素则可以忽略，毕竟已经转成字符了，精度早就下降没了。（高度同理）

但我的目的并不是仅仅放到前端展示，我希望它在 node 端也能即时地读取图片并转换。

为什么呢，因为我最近打算整一个终端的文字冒险游戏，可能会成为 ADV 游戏引擎计划的一些试水，而在终端回车显示对话，选项，偶尔用字符串来展示图片应该也会是比较酷的事情，当然这就是他话了。

对于 Node 来说，并没有 document 的存在，当然也就没有 canvas 的 ImageData，但是我们可以通过 node-canvas 来实现。

node-canvas 是使用 C 原生编写，再打包交由 Node 调用，因此需要安装 node-pre-gyp，而这家伙可以说是「臭名昭著」了，国内的安装速度极为缓慢，还未必成功。

面向用户的产物，不能期望每个人都能成功安装使用它，所以我们应该寻求其他更方便可靠的方式。

我最后找到的方案则是 jimp @canvas/image-data。

jimp 是纯粹使用 JavaScript 编写的图片处理库，与原生性能的差距也完全可以容忍。

当我们想要在 Node 端运行时，只需要再安装 jimp 与 @canvas/image-data 便可。

在国内镜像的加持下，也无需担心。

既然说到这了，就顺带再打个 nnrm 的广告。nnrm - 一个极简的 npm/yarn registry 切换管理器

jimp 读取图像数据，@canvas/image-data 负责将其转化为标准的 ImageData，再交给 char-dust。

代码语言：javascript复制

yarn add jimp @canvas/image-data

代码语言：javascript复制

import jimp from "jimp";
import ImageData from "@canvas/image-data";
import { imageToText } from "char-dust";
import { resolve } from "path";

jimp.read(resolve(__dirname, "./cat-of-the-rebellion.jpg")).then((image) => {
  image.scale(5);
  const imageData = new ImageData(
    Uint8ClampedArray.from(image.bitmap.data),
    image.bitmap.width,
    image.bitmap.height
  );

  const text = imageToText(imageData);
  console.log(text);
});

万事大吉。

其他则是细节的处理，效率优化，UI 样式，图片缩放，打包，node 端的兼容之类的。