Create script.js

script.js

@@ -0,0 +1,179 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // 要素の取得
+    const imageUpload = document.getElementById('image-upload');
+    const canvas = document.getElementById('image-canvas');
+    const ctx = canvas.getContext('2d');
+    
+    // スライダー要素の取得
+    const brightnessSlider = document.getElementById('brightness');
+    const contrastSlider = document.getElementById('contrast');
+    const saturationSlider = document.getElementById('saturation');
+    const shadowsSlider = document.getElementById('shadows');
+    const highlightsSlider = document.getElementById('highlights');
+    const hueSlider = document.getElementById('hue');
+    const hueSaturationSlider = document.getElementById('hue-saturation');
+    const lightnessSlider = document.getElementById('lightness');
+    const redCurveSlider = document.getElementById('red-curve');
+    const greenCurveSlider = document.getElementById('green-curve');
+    const blueCurveSlider = document.getElementById('blue-curve');
+    
+    // 値表示要素の取得
+    const brightnessValue = document.getElementById('brightness-value');
+    const contrastValue = document.getElementById('contrast-value');
+    const saturationValue = document.getElementById('saturation-value');
+    const shadowsValue = document.getElementById('shadows-value');
+    const highlightsValue = document.getElementById('highlights-value');
+    const hueValue = document.getElementById('hue-value');
+    const hueSaturationValue = document.getElementById('hue-saturation-value');
+    const lightnessValue = document.getElementById('lightness-value');
+    const redCurveValue = document.getElementById('red-curve-value');
+    const greenCurveValue = document.getElementById('green-curve-value');
+    const blueCurveValue = document.getElementById('blue-curve-value');
+    
+    // ボタン要素の取得
+    const resetBtn = document.getElementById('reset-btn');
+    const downloadBtn = document.getElementById('download-btn');
+    
+    let camanInstance = null;
+    let originalImageData = null;
+    
+    // 画像アップロードの処理
+    imageUpload.addEventListener('change', function(e) {
+        if (e.target.files && e.target.files[0]) {
+            const reader = new FileReader();
+            
+            reader.onload = function(event) {
+                const img = new Image();
+                img.onload = function() {
+                    // キャンバスのサイズを画像に合わせて調整
+                    const maxWidth = 800;
+                    const maxHeight = 600;
+                    let width = img.width;
+                    let height = img.height;
+                    
+                    if (width > maxWidth) {
+                        height = (maxWidth / width) * height;
+                        width = maxWidth;
+                    }
+                    
+                    if (height > maxHeight) {
+                        width = (maxHeight / height) * width;
+                        height = maxHeight;
+                    }
+                    
+                    canvas.width = width;
+                    canvas.height = height;
+                    
+                    // 画像をキャンバスに描画
+                    ctx.drawImage(img, 0, 0, width, height);
+                    
+                    // CamanJSのインスタンスを作成
+                    Caman(canvas, function() {
+                        camanInstance = this;
+                        originalImageData = this.toBase64();
+                        
+                        // スライダーをリセット
+                        resetSliders();
+                    });
+                };
+                
+                img.src = event.target.result;
+            };
+            
+            reader.readAsDataURL(e.target.files[0]);
+        }
+    });
+    
+    // スライダー変更時の処理
+    function setupSlider(slider, valueElement, filterName, paramName) {
+        slider.addEventListener('input', function() {
+            if (!camanInstance) return;
+            
+            valueElement.textContent = this.value;
+            applyFilters();
+        });
+    }
+    
+    // 各スライダーにイベントリスナーを設定
+    setupSlider(brightnessSlider, brightnessValue, 'brightness', 'brightness');
+    setupSlider(contrastSlider, contrastValue, 'contrast', 'contrast');
+    setupSlider(saturationSlider, saturationValue, 'saturation', 'saturation');
+    setupSlider(shadowsSlider, shadowsValue, 'exposure', 'shadows');
+    setupSlider(highlightsSlider, highlightsValue, 'exposure', 'highlights');
+    setupSlider(hueSlider, hueValue, 'hue', 'hue');
+    setupSlider(hueSaturationSlider, hueSaturationValue, 'saturation', 'hueSaturation');
+    setupSlider(lightnessSlider, lightnessValue, 'vibrance', 'lightness');
+    setupSlider(redCurveSlider, redCurveValue, 'channels', 'red');
+    setupSlider(greenCurveSlider, greenCurveValue, 'channels', 'green');
+    setupSlider(blueCurveSlider, blueCurveValue, 'channels', 'blue');
+    
+    // フィルターを適用する関数
+    function applyFilters() {
+        if (!camanInstance) return;
+        
+        camanInstance.revert(false);
+        
+        // 各フィルターを適用
+        camanInstance.brightness(parseInt(brightnessSlider.value));
+        camanInstance.contrast(parseInt(contrastSlider.value));
+        camanInstance.saturation(parseInt(saturationSlider.value));
+        camanInstance.exposure({
+            shadows: parseInt(shadowsSlider.value),
+            highlights: parseInt(highlightsSlider.value)
+        });
+        camanInstance.hue(parseInt(hueSlider.value));
+        camanInstance.vibrance(parseInt(lightnessSlider.value));
+        camanInstance.channels({
+            red: parseInt(redCurveSlider.value) / 100,
+            green: parseInt(greenCurveSlider.value) / 100,
+            blue: parseInt(blueCurveSlider.value) / 100
+        });
+        
+        camanInstance.render();
+    }
+    
+    // スライダーをリセットする関数
+    function resetSliders() {
+        brightnessSlider.value = 0;
+        contrastSlider.value = 0;
+        saturationSlider.value = 0;
+        shadowsSlider.value = 0;
+        highlightsSlider.value = 0;
+        hueSlider.value = 0;
+        hueSaturationSlider.value = 0;
+        lightnessSlider.value = 0;
+        redCurveSlider.value = 0;
+        greenCurveSlider.value = 0;
+        blueCurveSlider.value = 0;
+        
+        brightnessValue.textContent = '0';
+        contrastValue.textContent = '0';
+        saturationValue.textContent = '0';
+        shadowsValue.textContent = '0';
+        highlightsValue.textContent = '0';
+        hueValue.textContent = '0';
+        hueSaturationValue.textContent = '0';
+        lightnessValue.textContent = '0';
+        redCurveValue.textContent = '0';
+        greenCurveValue.textContent = '0';
+        blueCurveValue.textContent = '0';
+        
+        if (camanInstance) {
+            camanInstance.revert(false);
+            camanInstance.render();
+        }
+    }
+    
+    // リセットボタンの処理
+    resetBtn.addEventListener('click', resetSliders);
+    
+    // ダウンロードボタンの処理
+    downloadBtn.addEventListener('click', function() {
+        if (!camanInstance) return;
+        
+        const link = document.createElement('a');
+        link.download = 'edited-image.png';
+        link.href = canvas.toDataURL('image/png');
+        link.click();
+    });
+});