作ったもの

Image Mosaic — https://sen.ltd/portfolio/image-mosaic/

3 レンダリングモード: 色付き四角 / 絵文字 / ASCII
グリッドサイズ調整
元画像との並列表示
PNG ダウンロード
ASCII / 絵文字モードはテキストコピー対応

vanilla JS、ゼロ依存、ビルド不要。node --test で 35 ケース。

アルゴリズム

画像をグリッドに分割
各セルの平均 RGB を計算
パレットから最も近い色を選ぶ
パレットエントリで置換

3 モードの違いはパレットだけ。

絵文字パレット

const EMOJI_PALETTE = [
  { char: '🟥', color: { r: 220, g: 40, b: 40 } },
  { char: '🟧', color: { r: 240, g: 140, b: 30 } },
  { char: '🟨', color: { r: 240, g: 220, b: 40 } },
  ...
];

色付き四角の絵文字（🟥🟧🟨🟩🟦🟪🟫⬛⬜ など）は Discord / Slack / X でも綺麗に表示される。

ASCII の濃度ランプ

const ASCII_DENSITY = ' .:-=+*#%@';
const idx = Math.floor((brightness / 255) * 9);
return ASCII_DENSITY[9 - idx];

明るいピクセルは空白やピリオド、暗いピクセルは @ や %。10 段階で十分表現力がある。

シリーズ

100+ 公開ポートフォリオ シリーズの #75 です。

📦 リポジトリ: https://github.com/sen-ltd/image-mosaic
🌐 デモ: https://sen.ltd/portfolio/image-mosaic/
🏢 会社: https://sen.ltd/