[ascii-bake · 画像 → アスキーアート変換]

画像を
アスキーアート
にする。

写真・イラスト・ロゴを @%#*+=-:. などの文字に置き換えて、 アスキーアート (ASCII art) に変換します。 SNS、 掲示板、 README、 メールの署名などにそのまま貼れる形でコピー / ダウンロード可能。 画像はサーバーに送らず、 ブラウザ内だけで処理します。

on-device canvas only 4 charsets · 16-240 cols

[ ./how_it_works ]

仕組み。

step / 01

画像を落とす

JPEG / PNG / WebP / GIF / HEIC 等、 Canvas が読める画像なら何でも。 ファイルはサーバーに送らず、 ブラウザのメモリ内だけで処理します。

step / 02

Canvas で明暗を読む

画像を希望の列数にダウンサンプルし、 各セルの輝度 (Rec.601) を計算。 透過部分はアルファ合成して白寄りに正規化します。

step / 03

文字ランプにマップ

暗い方から `@%#*+=-:. ` のような文字ランプに離散化。 charset 4種 (標準/ブロック/ミニマル/二値) と invert モードを切替可能。

[ ./faq ]

よくある質問。

本当に画像はサーバーに送られないのですか?+

送られません。 ASCIIBake は Canvas API で画像のピクセルをブラウザ内で読み、 明度を計算して文字に置き換えているだけです。 ML モデルも外部 API も使いません。 すべてあなたのデバイス内で完結します。

なぜブラウザ完結に意味があるのですか?+

アスキーアート化はそれ自体プライバシー要求が薄い処理ですが、 「アバター画像のテストに使う」 「業務写真を遊びで変換する」 などのケースで 「アップロード抜きで気軽に試せる」 形にする価値はあります。 ラボの 12本目として 『重い処理だけがブラウザ完結する意味があるわけではない』 を示す軽量ピース。

文字セット 4種類の違いは?+

**標準** (`@%#*+=-:. ` 10階調) はディテール重視。 **ブロック** (`█▓▒░ ` 5階調) はピクセルアート風、 一見で形が分かる。 **ミニマル** (`#+-. ` 5階調) は印刷向き、 紙にコピペしやすい。 **二値** (`# ` 2階調) は SVG / 簡素ロゴ向き。 用途で切替えてください。

列数 (cols) の上限は?+

16〜240 列の範囲です。 80列が標準、 大きい画像なら 160〜240 列まで上げると線が見える。 各セルはモノスペース font が概ね 2:1 (縦長) なので、 cols 設定から自動的に rows を 「源画像の縦横比 × cellAspect」 で導出します。

他のメディアサービスとの関係は?+

voice-scribe / clip-cast / bg-snap / text-pluck / pdf-anvil / pixel-lift / pic-flip / mind-cell / beam-drop / word-warp / exif-peel に続くラボの 12本目です。 これまでの 「実用」 「プライバシー」 軸とは違う 「クリエイティブ / 視覚遊び」 軸の追加。 純 JS で重さゼロ、 一般ユーザーが手軽に試せる動線。

[ ./journal ]

開発ログ。

ASCIIBake

ASCIIBake ができるまで — Canvas だけで画像を文字に焼く軽量ピース

Canvas API の createImageBitmap → drawImage → getImageData だけで画像の明暗を読み、 文字ランプにマップする アスキーアート生成ツールの設計記録。 ML / WASM / モデル不要、 純 JS で 12本目を埋めた話。

read log →

all_entries →

← back to ai-lab.org