filter.js

/**
 * 이미지 필터 기능을 위한 자바스크립트 파일
 * 이미지 필터 적용, 관리에 관련된 모든 함수를 포함
 */

// 필터 기본값
const DEFAULT_FILTERS = {
    temperature: 0,
    brightness: 100,
    contrast: 100,
    saturation: 100
};

/**
 * 이미지 데이터에 필터 적용
 * @param {ImageData} imageData - 이미지 데이터
 * @param {Object} filters - 필터 설정 (temperature, brightness, contrast, saturation)
 * @returns {ImageData} - 필터가 적용된 이미지 데이터
 */
function applyFilters(imageData, filters) {
    const {temperature, brightness, contrast, saturation} = filters;
    
    const data = imageData.data;
    
    // 이미지 데이터의 각 픽셀에 필터 적용
    for (let i = 0; i < data.length; i += 4) {
        // RGB 값 추출
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        
        // 색온도 적용 (빨간색/파란색 조정)
        if (temperature !== 0) {
            const tempValue = temperature / 5; // 효과 강도 조정
            if (tempValue > 0) {
                // 따뜻한 색조 (더 빨갛게)
                r = Math.min(255, r + tempValue);
                b = Math.max(0, b - tempValue / 2);
            } else {
                // 차가운 색조 (더 파랗게)
                r = Math.max(0, r + tempValue);
                b = Math.min(255, b - tempValue * 1.5);
            }
        }
        
        // 밝기 적용 (모든 색상 채널에 균일하게 적용)
        const brightnessMultiplier = brightness / 100;
        r = Math.min(255, r * brightnessMultiplier);
        g = Math.min(255, g * brightnessMultiplier);
        b = Math.min(255, b * brightnessMultiplier);
        
        // 대비 적용
        const contrastFactor = (contrast / 100);
        r = Math.min(255, Math.max(0, (r - 128) * contrastFactor + 128));
        g = Math.min(255, Math.max(0, (g - 128) * contrastFactor + 128));
        b = Math.min(255, Math.max(0, (b - 128) * contrastFactor + 128));
        
        // 채도 적용
        const avg = (r + g + b) / 3;
        const saturationMultiplier = saturation / 100;
        r = Math.min(255, Math.max(0, avg + (r - avg) * saturationMultiplier));
        g = Math.min(255, Math.max(0, avg + (g - avg) * saturationMultiplier));
        b = Math.min(255, Math.max(0, avg + (b - avg) * saturationMultiplier));
        
        // 값 다시 저장
        data[i] = Math.round(r);
        data[i + 1] = Math.round(g);
        data[i + 2] = Math.round(b);
    }
    
    return imageData;
}

/**
 * 이미지에 필터를 적용하여 새 캔버스에 그리기
 * @param {HTMLImageElement} image - 원본 이미지
 * @param {Object} filters - 필터 설정
 * @returns {HTMLCanvasElement} - 필터가 적용된 이미지가 그려진 캔버스
 */
function createFilteredCanvas(image, filters) {
    if (!image) return null;
    
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = image.width;
    tempCanvas.height = image.height;
    const tempCtx = tempCanvas.getContext('2d');
    
    // 원본 이미지 그리기
    tempCtx.drawImage(image, 0, 0);
    
    // 필터 적용
    const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
    const filteredData = applyFilters(imageData, filters);
    tempCtx.putImageData(filteredData, 0, 0);
    
    return tempCanvas;
}

/**
 * 선택된 레이어에만 필터 적용
 * @param {Array} overlays - 레이어 배열
 * @param {number} activeOverlayIndex - 현재 활성 레이어 인덱스
 * @param {Object} filterValues - 적용할 필터 값
 */
function applyFilterToLayer(overlays, activeOverlayIndex, filterValues) {
    if (activeOverlayIndex >= 0 && activeOverlayIndex < overlays.length) {
        // 현재 선택된 레이어에만 필터 적용
        overlays[activeOverlayIndex].filters = { ...filterValues };
    }
}

/**
 * 필터 초기화
 * @param {Array} overlays - 레이어 배열
 * @param {number} activeOverlayIndex - 현재 활성 레이어 인덱스
 * @returns {Object} - 초기화된 필터 값
 */
function resetFilters(overlays, activeOverlayIndex) {
    // 현재 레이어의 필터를 초기화
    if (activeOverlayIndex >= 0 && activeOverlayIndex < overlays.length) {
        overlays[activeOverlayIndex].filters = { ...DEFAULT_FILTERS };
    }
    
    // 초기 필터 값 반환
    return { ...DEFAULT_FILTERS };
}

// filter.js의 함수를 외부에서 사용할 수 있도록 전역으로 노출
window.ImageFilters = {
    applyFilters,
    createFilteredCanvas,
    applyFilterToLayer,
    resetFilters,
    DEFAULT_FILTERS
};