| コード | 何を管理している？ |
|---|---|
image | アップロードした画像をメモリに持っておく |
originalImageData | 元画像を保存してリセットできるようにする |
isDragging | ドラッグしている最中かどうか |
startX, startY, endX, endY | ドラッグ開始・終了の座標を記録する |
① let image = new Image();
意味
- 新しい空っぽの画像オブジェクトを作成して、imageという変数に入れています。
- ここで作った
imageに、あとでアップロードした画像データを読み込みます。
なぜ必要？
- ファイルから読み込んだ画像データを一時的に保存して管理するため。
- その後、Canvas上に
ctx.drawImage(image, 0, 0)で画像を表示するために使います。
ポイント
new Image()はブラウザが持っている特別な画像用オブジェクト。image.src = データみたいにして、読み込んだ画像をメモリ上に持っておけます。
② let originalImageData = null;
意味
- 最初は空っぽ（
null）にしておく変数です。 - 後で「元の画像データ」を保存するために使います。
何を保存するの？
- Canvasに最初に描いた「ぼかし加工する前の元画像の情報」を保存しておきます。
なぜ必要？
- 「リセットボタン」を押したときに、
ぼかし加工する前のきれいな状態の画像に戻すため。
ポイント
- Canvasの画像データは
ctx.getImageData(x, y, width, height)で取得できる。 - これをこの変数に保存しておけば、後で
ctx.putImageData()で復元できる。
③ let isDragging = false;
意味
- マウスのドラッグ中かどうかを記録するための変数です。
- 最初は
false（ドラッグしていない状態）にしておきます。
どう使うの？
- マウスを押したら
trueにして、 - マウスを離したら
falseにして、 - ドラッグ中だけ特別な動きをさせるために使います。
なぜ必要？
- クリックしただけでは動作しないようにするため。
- ちゃんと「ドラッグして選んだ範囲だけ」ぼかすため。
ポイント
- ドラッグ中かどうかの管理は、範囲選択系ツールでは必須のテクニックです。
④ let startX, startY, endX, endY;
意味
- マウスを押した位置（スタート地点）と、
- マウスを離した位置（エンド地点）を記録するための変数です。
| 変数 | 意味 |
|---|---|
startX | ドラッグ開始時のX座標（横） |
startY | ドラッグ開始時のY座標（縦） |
endX | ドラッグ終了時のX座標（横） |
endY | ドラッグ終了時のY座標（縦） |
なぜ必要？
- この2点の座標から、ドラッグした範囲（四角形）を計算できるから。
- その範囲だけぼかしをかけたいので、必要になります。
ポイント
- ドラッグした向きによって、スタートとエンドが逆になることもあるので、
必ずMath.min()/Math.max()を使って、正しい範囲を計算しています。
まとめ
| コード | 何を管理している？ |
|---|---|
image | アップロードした画像をメモリに持っておく |
originalImageData | 元画像を保存してリセットできるようにする |
isDragging | ドラッグしている最中かどうか |
startX, startY, endX, endY | ドラッグ開始・終了の座標を記録する |