File API → Canvas → async/await：愛猫写真の画像処理サンプル

1. ZIPをすべて展開します。
2. index.html、app.js、cat.jpg、README.txtがあるフォルダーでターミナルを開きます。
3. node --version とnpmの版を確認します。Windows PowerShellは npm.cmd --version、macOS/Linuxは npm --version です。Node.js未導入なら https://nodejs.org/ja/ からLTS版を導入し、ターミナルを開き直します。
4. Windows PowerShell: npx.cmd --yes http-server . -p 8080 -c-1
   macOS/Linux: npx --yes http-server . -p 8080 -c-1
5. http://localhost:8080/ を開き、「画像を読み込み、4枚配置する」を押します。
6. 「生成したPNGを保存する」でPNGを保存します。終了はターミナルでCtrl+C。

file://で直接開かずHTTPで起動します。8080が使用中なら -p 8081 と http://localhost:8081/ へ両方を変更します。
初回のHTTPサーバー取得には通信が必要です。画像処理に外部SDK・MediaPipe・HEIC変換ライブラリは使いません。
内蔵のcat.jpgはnekonote-toolsプロジェクトの運営者の愛猫写真です。HTTPサーバーから内蔵写真を取得しますが、利用者が選んだ画像を外部へ送信するコードはありません。
JPEG・PNG・WebPの20 MB以下を教材の入力範囲とします。画像の原本は変更しません。出力は説明用の960×720 px・2列×2行で、証明写真ツールの本番レイアウトとは別です。

学ぶ記事:
https://nekonote-tools.com/notes/file-api-object-url/
https://nekonote-tools.com/notes/canvas-api-image-processing/
https://nekonote-tools.com/notes/async-await-concurrency/