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 ファイルを参照してください。