画像二値化・エッジ抽出ツール

概要

このアプリケーションは、画像を二値化し、必要に応じてエッジを抽出するためのウェブベースのツールです。大津の二値化アルゴリズムを使用して自動的に最適な閾値を決定し、高品質な二値化画像を生成します。また、二値化した画像からエッジのみを抽出する機能も備えています。

主な機能

画像処理

画像のアップロード: ドラッグ＆ドロップまたはクリックして画像をアップロード
自動二値化: 大津の二値化アルゴリズムによる最適な閾値の自動決定
ノイズ除去: メディアンフィルタなどを使用した効果的なノイズ除去
エッジ抽出: 二値化画像から輪郭（エッジ）のみを抽出
エッジの太さ調整: 極細から極太まで5段階でエッジの太さを調整可能
白黒反転: 処理結果の白黒を反転

画像管理

大きな画像のリサイズ: 処理速度向上のための自動リサイズ機能
リアルタイムプレビュー: 元画像と処理後の画像を並べて表示
処理進捗表示: 処理の進行状況をオーバーレイプログレスバーで表示

エクスポート

PNG形式でエクスポート: 処理結果をPNG形式で保存
SVG形式でエクスポート: 処理結果をSVG形式に変換して保存
SVG単純化: SVG変換時の詳細度を調整可能

技術仕様

フレームワーク: Svelte + TypeScript
ビルドツール: Vite
画像処理アルゴリズム:
- 大津の二値化アルゴリズム（自動閾値決定）
- メディアンフィルタ（ノイズ除去）
- 輪郭抽出アルゴリズム（エッジ検出）
- 膨張処理（エッジの太さ調整）
- ガウシアンブラー（前処理）
非同期処理: Promiseベースの処理とプログレス報告
レスポンシブデザイン: モバイルデバイスにも対応

使い方

画像をドラッグ＆ドロップするか、クリックしてアップロード
処理オプションを調整すると、リアルタイムで画像処理が実行されます:
- 白黒反転の有効/無効
- エッジのみを抽出の有効/無効
- エッジの太さ（極細、細い、標準、太い、極太）
- 大きな画像のリサイズの有効/無効と最大サイズ
- SVG単純化レベルの調整
処理結果を確認し、必要に応じてPNGまたはSVG形式でエクスポート

インストールと実行

# 依存関係のインストール
npm install

# 開発サーバーの起動
npm run dev

# ビルド
npm run build

# ビルド結果のプレビュー
npm run preview

実装の詳細

画像処理アルゴリズム

大津の二値化アルゴリズム

画像のヒストグラムを分析し、クラス間分散を最大化する閾値を自動的に決定します。これにより、画像の特性に応じた最適な二値化が可能になります。

ノイズ除去

メディアンフィルタを使用して、二値化後の画像からノイズを除去します。このフィルタは、各ピクセルの周囲の値の中央値を取ることで、孤立したノイズを効果的に除去します。

エッジ抽出

二値化された画像から、黒ピクセルの周囲に白ピクセルがある場合にそのピクセルを輪郭として抽出します。これにより、オブジェクトの輪郭のみを取り出すことができます。

エッジの太さ調整

膨張処理を使用してエッジの太さを調整します。黒ピクセルの周囲の白ピクセルを黒に変換する処理を繰り返すことで、エッジを太くすることができます。ユーザーは5段階（極細、細い、標準、太い、極太）から選択できます。

リアクティブな処理

ユーザーがオプションを変更すると、自動的に画像処理が実行され、結果がリアルタイムで表示されます。これにより、直感的な操作感を実現しています。

コンポーネント構成

ImageProcessor: メインコンポーネント。画像処理のワークフローを管理
ProcessingControls: 処理オプションの設定UI
ImagePreview: 画像のプレビュー表示
ExportOptions: エクスポートオプションの提供
Dropzone: ファイルのドラッグ＆ドロップインターフェース
ProgressOverlay: 処理進捗の視覚化（全画面オーバーレイ）
ButtonGroup: エッジの太さなど、選択肢が限られたオプションの選択UI

ライセンス

MIT License

fuwasegu/lineify