【JavaScript入門】ファイルのローカルへの保存（controlArea.js）

node-js/
 └─ app/
     ├─ index.html
     ├─ style.css
     └─ js/
          ├─ common.js
          ├─ storage.js
          ├─ imageArea.js
          ├─ imageEffects.js
          ├─ controlArea.js   ← ★今回実装
          ├─ commentArea.js
          ├─ sendArea.js
          ├─ dateFormat.js
          └─ postListArea.js

/* ---------------------------------------------------
   controlArea.js
   - エフェクトボタン & ファイル操作
   - セピア / グレースケール / ぼかし / 元に戻す / 保存 / 削除
--------------------------------------------------- */
window.addEventListener('DOMContentLoaded', () => {

  /* ========== DOM 取得 ========== */
  const canvas = document.querySelector('#view');
  const ctx    = canvas.getContext('2d');

  // ボタン群
  const btnSepia = document.querySelector('#efSepia');
  const btnGray  = document.querySelector('#efGray');
  const btnBlur  = document.querySelector('#efBlur');
  const btnBack  = document.querySelector('#efBack');
  const btnSave  = document.querySelector('#efSave');
  const btnDel   = document.querySelector('#efDel');

  /* ========== 画像キャッシュ (元に戻す用) ========== */
  let cacheData = null;    // ImageData の退避先
  let cacheTime = null;    // Canvas 描画時刻

  // Canvas が更新されたら ImageData を確保
  function ensureCache(){
    const t = canvas.getAttribute('time');
    if (t && t !== cacheTime){
      cacheData = ctx.getImageData(0,0,canvas.width,canvas.height);
      cacheTime = t;
    }
  }
  const hasImage = () => canvas.getAttribute('time') !== null;

  /* ========== ボタンイベント ========== */
  // ▶ セピア
  btnSepia.addEventListener('click', () => {
    if(!hasImage()) return;
    ensureCache();
    applySepia();
  });

  // ▶ グレースケール
  btnGray.addEventListener('click', () => {
    if(!hasImage()) return;
    ensureCache();
    applyCanvasFilter(canvas, ctx, 'grayscale(100%)');   // imageEffects.js で定義
  });

  // ▶ ぼかし
  btnBlur.addEventListener('click', () => {
    if(!hasImage()) return;
    ensureCache();
    applyCanvasFilter(canvas, ctx, 'blur(4px)');
  });

  // ▶ 元に戻す
  btnBack.addEventListener('click', () => {
    if (cacheData) ctx.putImageData(cacheData, 0, 0);
  });

  // ▶ 保存（PNG + コメント TXT）
  btnSave.addEventListener('click', () => {
    if(!hasImage()) return;
    saveImagePNG();
    saveCommentTXT();
  });

  // ▶ 削除（表示・ローカル保存データを完全リセット）
  btnDel.addEventListener('click', () => {
    // 表示を初期ガイドに戻す
    document.querySelector('#noView').style.display = 'flex';
    canvas.style.display = 'none';

    // コメントクリア
    document.querySelector('#comment').value = '';

    // localStorage もクリア（storage.js）
    removeCanvasStorage();
    removeCommentStorage();
    restoreCommentFromStorage();   // デフォルト値に復帰
  });

  /* ========== 内部ユーティリティ ========== */
  // ▼ セピア変換：RGB→輝度→色調整の手書き演算
  function applySepia(){
    const img = ctx.getImageData(0,0,canvas.width,canvas.height);
    const d = img.data;
    for (let i = 0; i < d.length; i += 4){
      const y = 0.299*d[i] + 0.587*d[i+1] + 0.114*d[i+2]; // 輝度
      d[i]   = y * 240 / 255 | 0;  // R
      d[i+1] = y * 200 / 255 | 0;  // G
      d[i+2] = y * 145 / 255 | 0;  // B
    }
    ctx.putImageData(img, 0, 0);
  }

  // ▼ PNG をダウンロード
  function saveImagePNG(){
    const url = canvas.toDataURL('image/png');      // Base64 PNG
    triggerDownload(url, 'image.png');
  }

  // ▼ コメントを TXT でダウンロード
  function saveCommentTXT(){
    const txt  = document.querySelector('#comment').value;
    const blob = new Blob([txt], {type: 'text/plain'});  // MIME は text/plain
    const url  = URL.createObjectURL(blob);              // Blob → 一時 URL
    triggerDownload(url, 'comment.txt');
    URL.revokeObjectURL(url);                            // メモリを即解放
  }

  // ▼ a.download を仮生成して自動クリック
  function triggerDownload(href, filename){
    const a = document.createElement('a');
    a.href = href;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    a.remove();
  }

});