画像をモザイクアートに変換するツール（カラー・絵文字・ASCII の 3 モード）

作ったもの

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

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

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

アルゴリズム

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

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/