/** * 이미지 필터 기능을 위한 자바스크립트 파일 * 이미지 필터 적용, 관리에 관련된 모든 함수를 포함 */ // 필터 기본값 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 };