v1

要件定義

1. 対応する画像サイズ:
   • 3種類のサイズを提供する。
     • 「大」: 元の画像サイズ。
     • 「中」: 元の画像の 50% サイズ。
     • 「小」: 元の画像の 25% サイズ。
   • サイズ変更時、余白は透明（transparent）で埋める。
2. 対応フォーマット:
   • 対応する画像フォーマットは PNG のみ。
3. ユーザーインターフェース:
   • 3つのボタン（「大」「中」「小」）を提供し、ユーザーがリサイズしたいサイズを選択可能にする。
4. リサイズ処理:
   • フロントエンドでJavaScriptを用いて画像をリサイズする。ライブラリは canvas API を使用。
   • 画像リサイズは保存やコピー時にリアルタイムで行う。
   • 保存やコピーの処理は元の実装に追加でリサイズ機能を組み込む。
5. 保存ワークフロー:
   • 画像の保存時には、リサイズされた画像をPNG形式でダウンロード。
   • ファイル名は自動で元の名前を保持する。
6. コピーのワークフロー:
   • リサイズされた画像をクリップボードにコピーする際も、リアルタイムにリサイズされた画像を適用。
7. 画質:
   • リサイズしても画質は保たれるように実装する。 canvas API でリサイズする際、画質の劣化を最小限に抑える設定を行う。

v2

要件定義

1. 画像サイズの調整方法:
   • スクロールバーを使用して画像のサイズを調整する。
   • スクロールバーの最小値は10%、最大値は100%。
   • スクロールバーを動かすたびに、現在のサイズ（%）がリアルタイムで左側に表示される。
2. ユーザーインターフェース:
   • スクロールバーと、現在のサイズを示すラベルを表示する。
   • ラベルはスクロールバーの左側に表示され、サイズをパーセンテージで示す。
3. リサイズ処理:
   • フロントエンドでリサイズ処理を行う（JavaScriptのcanvas APIを使用）。
   • ユーザーがスクロールバーを操作するたびに、画像のサイズがリアルタイムで変更される。
   • 保存やコピーの処理においても、選択されたサイズでリサイズされた画像を適用する。

v3

要件定義

1. 画像サイズの調整:
   • デフォルトのキャンバスサイズは1200px × 1200pxだが、任意のサイズに変更できるようにする。
   • ユーザーが任意の画像サイズを指定でき、キャンバスのサイズもそれに応じて変更可能。
   • 正方形だけでなく、長方形の画像にも対応できるように、縦と横のサイズを変数として保持。
2. リサイズの方法:
   • リサイズした画像は指定されたキャンバスの中央に配置され、余白は透明（transparent）で埋める。
   • スクロールバーで画像のサイズを調整でき、縦横の比率は保持される。（min:10%, max:100%）