Update script.js

script.js

@@ -1,111 +1,104 @@
 document.addEventListener('DOMContentLoaded', function() {
     // 要素の取得
     const imageUpload = document.getElementById('image-upload');
-    const canvas = document.getElementById('image-canvas');
-    const ctx = canvas.getContext('2d');
-    
-    // スライダー要素の取得
+    const imageCanvas = document.getElementById('image-canvas');
     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 hueRedSlider = document.getElementById('hue-red');
+    const hueGreenSlider = document.getElementById('hue-green');
+    const hueBlueSlider = document.getElementById('hue-blue');
     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');
     
+    // RGBカーブ用のキャンバス
+    const redCurveCanvas = document.getElementById('red-curve');
+    const greenCurveCanvas = document.getElementById('green-curve');
+    const blueCurveCanvas = document.getElementById('blue-curve');
+    
+    // カーブ制御用の変数
+    let redCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
+    let greenCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
+    let blueCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
+    
     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);
+        const file = e.target.files[0];
+        if (!file) return;
+        
+        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;
+                }
+                
+                imageCanvas.width = width;
+                imageCanvas.height = height;
+                
+                // CamanJSで画像を読み込���
+                Caman(imageCanvas, function() {
+                    this.revert(false);
+                    this.render();
+                    camanInstance = this;
+                    originalImageData = this.canvas.toDataURL();
                     
-                    // CamanJSのインスタンスを作成
-                    Caman(canvas, function() {
-                        camanInstance = this;
-                        originalImageData = this.toBase64();
-                        
-                        // スライダーをリセット
-                        resetSliders();
-                    });
-                };
+                    // RGBカーブを初期化
+                    initCurves();
+                });
                 
-                img.src = event.target.result;
+                const ctx = imageCanvas.getContext('2d');
+                ctx.drawImage(img, 0, 0, width, height);
             };
-            
-            reader.readAsDataURL(e.target.files[0]);
-        }
+            img.src = event.target.result;
+        };
+        reader.readAsDataURL(file);
     });
     
-    // スライダー変更時の処理
-    function setupSlider(slider, valueElement, filterName, paramName) {
+    // スライダーイベントの設定
+    function setupSlider(slider, valueElement, filterName, callback) {
         slider.addEventListener('input', function() {
-            if (!camanInstance) return;
-            
             valueElement.textContent = this.value;
-            applyFilters();
+            if (camanInstance) {
+                applyFilters();
+                if (callback) callback();
+            }
         });
     }
     
-    // 各スライダーにイベントリスナーを設定
-    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');
+    setupSlider(brightnessSlider, brightnessValue, 'brightness');
+    setupSlider(contrastSlider, contrastValue, 'contrast');
+    setupSlider(saturationSlider, saturationValue, 'saturation');
+    setupSlider(shadowsSlider, shadowsValue, 'shadows');
+    setupSlider(highlightsSlider, highlightsValue, 'highlights');
+    
+    // HSLスライダーの設定
+    hueRedSlider.addEventListener('input', applyFilters);
+    hueGreenSlider.addEventListener('input', applyFilters);
+    hueBlueSlider.addEventListener('input', applyFilters);
     
     // フィルターを適用する関数
     function applyFilters() {
@@ -113,67 +106,288 @@ document.addEventListener('DOMContentLoaded', function() {
         
         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.exposure(parseInt(shadowsSlider.value) / 10);
+        camanInstance.exposure(parseInt(highlightsSlider.value) / 10);
+        
+        // HSL調整
+        camanInstance.hue(parseInt(hueRedSlider.value) / 2);
+        camanInstance.hue(parseInt(hueGreenSlider.value) / 2);
+        camanInstance.hue(parseInt(hueBlueSlider.value) / 2);
+        
+        // RGBカーブを適用
+        applyRgbCurves();
+        
+        camanInstance.render();
+    }
+    
+    // RGBカーブを初期化
+    function initCurves() {
+        drawCurve(redCurveCanvas, redCurvePoints, 'red');
+        drawCurve(greenCurveCanvas, greenCurvePoints, 'green');
+        drawCurve(blueCurveCanvas, blueCurvePoints, 'blue');
+        
+        setupCurveInteraction(redCurveCanvas, redCurvePoints, 'red');
+        setupCurveInteraction(greenCurveCanvas, greenCurvePoints, 'green');
+        setupCurveInteraction(blueCurveCanvas, blueCurvePoints, 'blue');
+    }
+    
+    // カーブを描画
+    function drawCurve(canvas, points, color) {
+        const ctx = canvas.getContext('2d');
+        const width = canvas.width;
+        const height = canvas.height;
+        
+        // クリア
+        ctx.clearRect(0, 0, width, height);
+        
+        // グリッドを描画
+        ctx.strokeStyle = '#eee';
+        ctx.lineWidth = 1;
+        
+        // 水平線
+        for (let y = 0; y <= height; y += height / 4) {
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(width, y);
+            ctx.stroke();
+        }
+        
+        // 垂直線
+        for (let x = 0; x <= width; x += width / 4) {
+            ctx.beginPath();
+            ctx.moveTo(x, 0);
+            ctx.lineTo(x, height);
+            ctx.stroke();
+        }
+        
+        // 対角線
+        ctx.strokeStyle = '#ccc';
+        ctx.beginPath();
+        ctx.moveTo(0, height);
+        ctx.lineTo(width, 0);
+        ctx.stroke();
+        
+        // カーブを描画
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        
+        // 点をソート
+        points.sort((a, b) => a.x - b.x);
+        
+        // 最初の点
+        const firstPoint = points[0];
+        ctx.moveTo(firstPoint.x / 255 * width, (255 - firstPoint.y) / 255 * height);
+        
+        // 中間の点
+        for (let i = 1; i < points.length; i++) {
+            const point = points[i];
+            ctx.lineTo(point.x / 255 * width, (255 - point.y) / 255 * height);
+        }
+        
+        ctx.stroke();
+        
+        // 制御点を描画
+        ctx.fillStyle = color;
+        points.forEach(point => {
+            const x = point.x / 255 * width;
+            const y = (255 - point.y) / 255 * height;
+            ctx.beginPath();
+            ctx.arc(x, y, 5, 0, Math.PI * 2);
+            ctx.fill();
+        });
+    }
+    
+    // カーブのインタラクションを設定
+    function setupCurveInteraction(canvas, points, color) {
+        let isDragging = false;
+        let draggedPoint = null;
+        
+        canvas.addEventListener('mousedown', function(e) {
+            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 = 0; i < points.length; i++) {
+                const point = points[i];
+                const distance = Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2));
+                
+                if (distance < 15) { // ヒット半径
+                    isDragging = true;
+                    draggedPoint = point;
+                    return;
+                }
+            }
+            
+            // 新しい点を追加
+            if (x > 0 && x < 255 && y > 0 && y < 255) {
+                points.push({x, y});
+                points.sort((a, b) => a.x - b.x);
+                isDragging = true;
+                draggedPoint = {x, y};
+            }
+            
+            drawCurve(canvas, points, color);
+            applyFilters();
         });
-        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
+        
+        canvas.addEventListener('mousemove', function(e) {
+            if (!isDragging || !draggedPoint) return;
+            
+            const rect = canvas.getBoundingClientRect();
+            let x = (e.clientX - rect.left) / rect.width * 255;
+            let y = 255 - (e.clientY - rect.top) / rect.height * 255;
+            
+            // 境界チェック
+            x = Math.max(0, Math.min(255, x));
+            y = Math.max(0, Math.min(255, y));
+            
+            // 最初と最後の点はx座標を固定
+            if (points.indexOf(draggedPoint) === 0) {
+                x = 0;
+            } else if (points.indexOf(draggedPoint) === points.length - 1) {
+                x = 255;
+            }
+            
+            draggedPoint.x = x;
+            draggedPoint.y = y;
+            
+            drawCurve(canvas, points, color);
+            applyFilters();
         });
         
-        camanInstance.render();
+        canvas.addEventListener('mouseup', function() {
+            isDragging = false;
+            draggedPoint = null;
+        });
+        
+        canvas.addEventListener('mouseleave', function() {
+            isDragging = false;
+            draggedPoint = null;
+        });
+        
+        // ポイントを削除するダブルクリック
+        canvas.addEventListener('dblclick', function(e) {
+            if (points.length <= 2) return; // 最低2点は必要
+            
+            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++) { // 最初と最後は削除しない
+                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;
+                }
+            }
+        });
     }
     
-    // スライダーをリセットする関数
-    function resetSliders() {
+    // RGBカーブを適用
+    function applyRgbCurves() {
+        if (!camanInstance) return;
+        
+        // カーブデータを準備
+        const redCurve = createCurveData(redCurvePoints);
+        const greenCurve = createCurveData(greenCurvePoints);
+        const blueCurve = createCurveData(blueCurvePoints);
+        
+        // カーブを適用
+        camanInstance.process("rgbCurve", function(rgba) {
+            rgba.r = redCurve[rgba.r];
+            rgba.g = greenCurve[rgba.g];
+            rgba.b = blueCurve[rgba.b];
+            return rgba;
+        });
+    }
+    
+    // カーブデータを作成
+    function createCurveData(points) {
+        points.sort((a, b) => a.x - b.x);
+        const curve = new Array(256);
+        
+        for (let i = 0; i < points.length - 1; i++) {
+            const start = points[i];
+            const end = points[i + 1];
+            
+            const x1 = Math.round(start.x);
+            const y1 = Math.round(start.y);
+            const x2 = Math.round(end.x);
+            const y2 = Math.round(end.y);
+            
+            // 線形補間
+            for (let x = x1; x <= x2; x++) {
+                const t = (x - x1) / (x2 - x1);
+                curve[x] = Math.round(y1 + t * (y2 - y1));
+            }
+        }
+        
+        return curve;
+    }
+    
+    // リセットボタン
+    resetBtn.addEventListener('click', function() {
+        if (!camanInstance) return;
+        
+        // スライダーをリセット
         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;
+        hueRedSlider.value = 0;
+        hueGreenSlider.value = 0;
+        hueBlueSlider.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);
+        
+        // カーブをリセット
+        redCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
+        greenCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
+        blueCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
+        
+        drawCurve(redCurveCanvas, redCurvePoints, 'red');
+        drawCurve(greenCurveCanvas, greenCurvePoints, 'green');
+        drawCurve(blueCurveCanvas, blueCurvePoints, 'blue');
+        
+        // 画像をリセット
+        const img = new Image();
+        img.onload = function() {
+            const ctx = imageCanvas.getContext('2d');
+            ctx.drawImage(img, 0, 0, imageCanvas.width, imageCanvas.height);
+            
+            Caman(imageCanvas, function() {
+                this.revert(false);
+                this.render();
+                camanInstance = this;
+            });
+        };
+        img.src = originalImageData;
+    });
     
-    // ダウンロードボタンの処理
+    // ダウンロードボタン
     downloadBtn.addEventListener('click', function() {
         if (!camanInstance) return;
         
         const link = document.createElement('a');
         link.download = 'edited-image.png';
-        link.href = canvas.toDataURL('image/png');
+        link.href = imageCanvas.toDataURL('image/png');
         link.click();
     });
 });