Rui Software

ブラウザで動く画像編集ツールをHTML単一ファイル（HTML/CSS/JS完結）で実装してください。

【画像読み込み】
- ドラッグ＆ドロップと input[type=file] の両方に対応する（PNG/JPEG/GIF/WebP）
- FileReader.readAsDataURL() で読み込み、Image オブジェクト経由で Canvas に描画する

【レイヤー構造】
- layers[] : { id, name, canvas(OffscreenCanvasと同等のdocument.createElement('canvas')), visible, opacity } の配列で管理する
- 合成描画: layers を順に ctx.drawImage() で重ね描きして mainCanvas に反映する
- レイヤー操作: 追加・複製・削除・表示切替・統合をサポートする

【ツール（ドラッグ選択）】
- mainCanvas の mousedown/mousemove/mouseup イベントで選択矩形を取得する
- getBoundingClientRect() + canvas の実解像度比でピクセル座標に変換する
- overlayCanvas（position:absolute で重ねた透明 canvas）に選択枠を描画する
- トリミング: 選択矩形で全レイヤーを切り抜き canvas サイズを変更する
- ぼかし: ctx.filter = 'blur(6px)' を一時 canvas に適用して元レイヤーに合成する

【背景透過】
- getImageData() でピクセルデータを取得する
- 指定色との距離を sqrt(dr²+dg²+db²) で計算し、許容範囲以内なら alpha=0 にする
- putImageData() で反映する

【色調整（明るさ・コントラスト・彩度）】
- コントラスト係数: cf = (259 * (c+255)) / (255 * (259-c))
- 彩度: グレー値 = 0.299R + 0.587G + 0.114B を基準に線形補間する
- getImageData → ピクセルループ処理 → putImageData の流れで実装する

【畳み込みフィルタ】
- 3×3 カーネルで sharpen / edge / emboss を実装する
- グレースケール・セピア・ネガポジはピクセル単位の演算で実装する

【レイヤー自動分割（BFS フラッドフィル）】
- visited[w*h] の Uint8Array でアクセス済み管理する
- 始点ピクセルと色差が tolerance 以内のピクセルをキューで探索し連結領域を収集する
- minArea 未満の領域は除外し、面積上位8領域を独立レイヤーとして生成する

【Undo】
- 操作前に layers の各 canvas を cloneCanvas() でディープコピーしてスタックに積む
- 最大20件保持し、超えたら先頭を削除する

【出力】
- PNG: mainCanvas.toDataURL('image/png') でダウンロードする
- JPEG: 白背景の一時 canvas に合成後 toDataURL('image/jpeg', quality) でダウンロードする

【制約】
- 外部ライブラリ不使用
- HTML/CSS/JS をすべて1ファイルに収める
- グローバル汚染防止のため即時関数（IIFE）で全体を囲む