Update script.js

script.js

@@ -16,7 +16,9 @@ document.addEventListener('DOMContentLoaded', function() {
     const shadowsValue = document.getElementById('shadows-value');
     const highlightsValue = document.getElementById('highlights-value');
     const resetBtn = document.getElementById('reset-btn');
+    const applyBtn = document.getElementById('apply-btn');
     const downloadBtn = document.getElementById('download-btn');
+    const loadingOverlay = document.getElementById('loading-overlay');
     
     // RGBカーブ用のキャンバス
     const redCurveCanvas = document.getElementById('red-curve');
@@ -30,12 +32,15 @@ document.addEventListener('DOMContentLoaded', function() {
     
     let camanInstance = null;
     let originalImageData = null;
+    let currentFilters = {};
     
     // 画像アップロードの処理
     imageUpload.addEventListener('change', function(e) {
         const file = e.target.files[0];
         if (!file) return;
         
+        showLoading();
+        
         const reader = new FileReader();
         reader.onload = function(event) {
             const img = new Image();
@@ -68,6 +73,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     
                     // RGBカーブを初期化
                     initCurves();
+                    hideLoading();
                 });
                 
                 const ctx = imageCanvas.getContext('2d');
@@ -79,50 +85,94 @@ document.addEventListener('DOMContentLoaded', function() {
     });
     
     // スライダーイベントの設定
-    function setupSlider(slider, valueElement, filterName, callback) {
+    function setupSlider(slider, valueElement) {
         slider.addEventListener('input', function() {
             valueElement.textContent = this.value;
-            if (camanInstance) {
-                applyFilters();
-                if (callback) callback();
-            }
         });
     }
     
-    setupSlider(brightnessSlider, brightnessValue, 'brightness');
-    setupSlider(contrastSlider, contrastValue, 'contrast');
-    setupSlider(saturationSlider, saturationValue, 'saturation');
-    setupSlider(shadowsSlider, shadowsValue, 'shadows');
-    setupSlider(highlightsSlider, highlightsValue, 'highlights');
+    setupSlider(brightnessSlider, brightnessValue);
+    setupSlider(contrastSlider, contrastValue);
+    setupSlider(saturationSlider, saturationValue);
+    setupSlider(shadowsSlider, shadowsValue);
+    setupSlider(highlightsSlider, highlightsValue);
     
-    // HSLスライダーの設定
-    hueRedSlider.addEventListener('input', applyFilters);
-    hueGreenSlider.addEventListener('input', applyFilters);
-    hueBlueSlider.addEventListener('input', applyFilters);
+    // 適用ボタンのイベントリスナー
+    applyBtn.addEventListener('click', function() {
+        if (!camanInstance) return;
+        showLoading();
+        
+        // 非同期で処理を行う
+        setTimeout(function() {
+            applyFilters();
+            hideLoading();
+        }, 100);
+    });
     
-    // フィルターを適用する関数
+    // フィルターを適用する関数（強化版）
     function applyFilters() {
         if (!camanInstance) return;
         
         camanInstance.revert(false);
         
-        // 基本調整
-        camanInstance.brightness(parseInt(brightnessSlider.value));
-        camanInstance.contrast(parseInt(contrastSlider.value));
-        camanInstance.saturation(parseInt(saturationSlider.value));
+        // 現在のフィルター設定を保存
+        currentFilters = {
+            brightness: parseInt(brightnessSlider.value),
+            contrast: parseInt(contrastSlider.value),
+            saturation: parseInt(saturationSlider.value),
+            shadows: parseInt(shadowsSlider.value),
+            highlights: parseInt(highlightsSlider.value),
+            hueRed: parseInt(hueRedSlider.value),
+            hueGreen: parseInt(hueGreenSlider.value),
+            hueBlue: parseInt(hueBlueSlider.value)
+        };
+        
+        // 明るさ（範囲拡大: -100 to 100 → -150 to 150）
+        camanInstance.brightness(currentFilters.brightness * 1.5);
+        
+        // コントラスト（効果を強化）
+        camanInstance.contrast(currentFilters.contrast * 1.5);
         
-        // トーン調整
-        camanInstance.exposure(parseInt(shadowsSlider.value) / 10);
-        camanInstance.exposure(parseInt(highlightsSlider.value) / 10);
+        // 彩度
+        camanInstance.saturation(currentFilters.saturation);
+        
+        // シャドウ（効果を強化、範囲拡大）
+        if (currentFilters.shadows > 0) {
+            camanInstance.shadows(currentFilters.shadows * 2);
+        } else {
+            camanInstance.exposure(currentFilters.shadows / 5);
+        }
+        
+        // ハイライト（効果を強化、範囲拡大）
+        if (currentFilters.highlights > 0) {
+            camanInstance.highlights(currentFilters.highlights * 2);
+        } else {
+            camanInstance.exposure(currentFilters.highlights / 5);
+        }
         
         // HSL調整
-        camanInstance.hue(parseInt(hueRedSlider.value) / 2);
-        camanInstance.hue(parseInt(hueGreenSlider.value) / 2);
-        camanInstance.hue(parseInt(hueBlueSlider.value) / 2);
+        camanInstance.hue(currentFilters.hueRed / 2);
+        camanInstance.hue(currentFilters.hueGreen / 2);
+        camanInstance.hue(currentFilters.hueBlue / 2);
         
         // RGBカーブを適用
         applyRgbCurves();
         
+        // 追加フィルター: シャープネス
+        if (currentFilters.sharpness) {
+            camanInstance.sharpen(currentFilters.sharpness);
+        }
+        
+        // 追加フィルター: ノイズ
+        if (currentFilters.noise) {
+            camanInstance.noise(currentFilters.noise);
+        }
+        
+        // 追加フィルター: ビネット
+        if (currentFilters.vignette) {
+            camanInstance.vignette("10%", currentFilters.vignette * 2);
+        }
+        
         camanInstance.render();
     }
     
@@ -219,7 +269,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 const point = points[i];
                 const distance = Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2));
                 
-                if (distance < 15) { // ヒット半径
+                if (distance < 15) {
                     isDragging = true;
                     draggedPoint = point;
                     return;
@@ -235,7 +285,6 @@ document.addEventListener('DOMContentLoaded', function() {
             }
             
             drawCurve(canvas, points, color);
-            applyFilters();
         });
         
         canvas.addEventListener('mousemove', function(e) {
@@ -260,7 +309,6 @@ document.addEventListener('DOMContentLoaded', function() {
             draggedPoint.y = y;
             
             drawCurve(canvas, points, color);
-            applyFilters();
         });
         
         canvas.addEventListener('mouseup', function() {
@@ -275,20 +323,19 @@ document.addEventListener('DOMContentLoaded', function() {
         
         // ポイントを削除するダブルクリック
         canvas.addEventListener('dblclick', function(e) {
-            if (points.length <= 2) return; // 最低2点は必要
+            if (points.length <= 2) return;
             
             const rect = canvas.getBoundingClientRect();
             const x = (e.clientX - rect.left) / rect.width * 255;
             const y = 255 - (e.clientY - rect.top) / rect.height * 255;
             
-            for (let i = 1; i < points.length - 1; i++) { // 最初と最後は削除しない
+            for (let i = 1; i < points.length - 1; i++) {
                 const point = points[i];
                 const distance = Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2));
                 
                 if (distance < 15) {
                     points.splice(i, 1);
                     drawCurve(canvas, points, color);
-                    applyFilters();
                     return;
                 }
             }
@@ -341,6 +388,8 @@ document.addEventListener('DOMContentLoaded', function() {
     resetBtn.addEventListener('click', function() {
         if (!camanInstance) return;
         
+        showLoading();
+        
         // スライダーをリセット
         brightnessSlider.value = 0;
         contrastSlider.value = 0;
@@ -376,9 +425,13 @@ document.addEventListener('DOMContentLoaded', function() {
                 this.revert(false);
                 this.render();
                 camanInstance = this;
+                hideLoading();
             });
         };
         img.src = originalImageData;
+        
+        // フィルター設定をリセット
+        currentFilters = {};
     });
     
     // ダウンロードボタン
@@ -390,4 +443,62 @@ document.addEventListener('DOMContentLoaded', function() {
         link.href = imageCanvas.toDataURL('image/png');
         link.click();
     });
+    
+    // 読み込み表示を制御する関数
+    function showLoading() {
+        loadingOverlay.style.display = 'flex';
+    }
+    
+    function hideLoading() {
+        loadingOverlay.style.display = 'none';
+    }
+    
+    // 追加機能: キーボードショートカット
+    document.addEventListener('keydown', function(e) {
+        if (e.ctrlKey && e.key === 'z') {
+            resetBtn.click();
+        } else if (e.ctrlKey && e.key === 's') {
+            downloadBtn.click();
+            e.preventDefault();
+        } else if (e.key === 'Enter') {
+            applyBtn.click();
+        }
+    });
+    
+    // 追加機能: プリセットフィルター
+    function applyPreset(presetName) {
+        switch(presetName) {
+            case 'vintage':
+                brightnessSlider.value = 10;
+                contrastSlider.value = 20;
+                saturationSlider.value = -30;
+                shadowsSlider.value = 15;
+                highlightsSlider.value = -10;
+                hueRedSlider.value = 10;
+                break;
+            case 'dramatic':
+                brightnessSlider.value = -10;
+                contrastSlider.value = 50;
+                saturationSlider.value = -20;
+                shadowsSlider.value = 30;
+                highlightsSlider.value = -20;
+                break;
+            case 'bright':
+                brightnessSlider.value = 30;
+                contrastSlider.value = 20;
+                saturationSlider.value = 40;
+                shadowsSlider.value = 20;
+                highlightsSlider.value = 10;
+                break;
+        }
+        
+        // スライダー値を更新
+        brightnessValue.textContent = brightnessSlider.value;
+        contrastValue.textContent = contrastSlider.value;
+        saturationValue.textContent = saturationSlider.value;
+        shadowsValue.textContent = shadowsSlider.value;
+        highlightsValue.textContent = highlightsSlider.value;
+        
+        applyBtn.click();
+    }
 });