Image to Pixel Art Converter

画像をピクセルアート風に変換するWebアプリケーション

🔗 デモサイト: https://midralab.github.io/ImageToPixelArt/

機能

• 🎨 カラー画像を指定色数（2-256色）に減色
• 🔲 ピクセル化処理によるレトロゲーム風の見た目
• 🎯 3種類のディザリング手法（Floyd-Steinberg, Ordered, Atkinson）
• 📏 出力サイズのカスタマイズ
• 💾 変換結果のダウンロード
• 🖱️ ドラッグ&ドロップ対応

対応ブラウザ

• Google Chrome 90+ (Windows/Mac/Linux)

開発

セットアップ

# 依存関係のインストール
npm install
# 開発サーバーの起動
npm run dev
# ビルド
npm run build

プロジェクト構造

src/
├── js/
│ ├── core/ # 画像処理コア
│ │ ├── colorQuantizer.js # 色量子化
│ │ ├── pixelator.js # ピクセル化
│ │ └── dithering.js # ディザリング
│ └── ui/ # UIコンポーネント
│ ├── fileUploader.js # ファイルアップロード
│ ├── settings.js # 設定管理
│ └── preview.js # プレビュー表示
├── css/
│ └── main.css # スタイルシート
└── index.html # メインHTML

アルゴリズム

色量子化

K-meansクラスタリングを使用して、画像の色を指定された色数に削減します。

ピクセル化

ブロック平均化またはCanvas APIのスケーリングを使用して、画像を低解像度化します。

ディザリング

• Floyd-Steinberg: エラー拡散による自然な見た目
• Ordered (Bayer): 規則的なパターンによるレトロな見た目
• Atkinson: 高コントラストな結果

ライセンス

Apache License 2.0

Copyright 2025 MidraLab

詳細は LICENSE ファイルを参照してください。