diff --git a/10620 황동화/script.js b/10620 황동화/script.js index 9ce6eac..e3eb44b 100644 --- a/10620 황동화/script.js +++ b/10620 황동화/script.js @@ -1,113 +1,83 @@ -// script.js - -document.addEventListener('DOMContentLoaded', () => { - const imageInput = document.getElementById('imageInput'); - const addImageButton = document.getElementById('addImageButton'); - const gallery = document.getElementById('gallery'); - const fileNameSpan = document.getElementById('fileName'); - - // 파일 입력 변화 이벤트 리스너 - imageInput.addEventListener('change', () => { - const file = imageInput.files[0]; - if (file) { - fileNameSpan.textContent = file.name; - } else { - fileNameSpan.textContent = ''; - } - }); - - // 이미지 추가 버튼 클릭 이벤트 리스너 - addImageButton.addEventListener('click', () => { - const file = imageInput.files[0]; - if (file) { - const reader = new FileReader(); - reader.onload = function(e) { - const imgElement = document.createElement('img'); - imgElement.src = e.target.result; - imgElement.alt = 'Uploaded Image'; - - // 이미지 분석 및 배경색 결정 로직 - getAverageColor(imgElement).then(color => { - document.body.style.backgroundColor = color; - }).catch(error => { - console.error('Error calculating average color:', error); - }); - - const deleteButton = document.createElement('button'); - deleteButton.classList.add('delete-button'); - deleteButton.innerText = 'Delete'; - deleteButton.addEventListener('click', () => { - galleryItem.remove(); - }); - - const galleryItem = document.createElement('div'); - galleryItem.classList.add('gallery-item'); - galleryItem.appendChild(imgElement); - galleryItem.appendChild(deleteButton); - gallery.appendChild(galleryItem); - - imgElement.addEventListener('click', () => { - openLightbox(imgElement.src); - }); - - // 파일 선택 후 파일명 초기화 - imageInput.value = ''; - fileNameSpan.textContent = ''; - }; - reader.readAsDataURL(file); - } - }); - - // 이미지 클릭시 라이트박스 열기 - function openLightbox(src) { - const lightbox = document.createElement('div'); - lightbox.id = 'lightbox'; - lightbox.style.position = 'fixed'; - lightbox.style.top = '0'; - lightbox.style.left = '0'; - lightbox.style.width = '100%'; - lightbox.style.height = '100%'; - lightbox.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; - lightbox.style.display = 'flex'; - lightbox.style.alignItems = 'center'; - lightbox.style.justifyContent = 'center'; - lightbox.style.zIndex = '1000'; - lightbox.innerHTML = ``; - document.body.appendChild(lightbox); - - lightbox.addEventListener('click', () => { - lightbox.remove(); - }); - } - - // 이미지 주요 색상 추출 함수 - function getAverageColor(imgElement) { - return new Promise((resolve, reject) => { - const canvas = document.createElement('canvas'); - const ctx = canvas.getContext('2d'); - canvas.width = imgElement.width; - canvas.height = imgElement.height; - ctx.drawImage(imgElement, 0, 0); - - let r = 0, g = 0, b = 0; - let count = 0; - - const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); - const data = imageData.data; - - for (let i = 0; i < data.length; i += 4) { - r += data[i]; - g += data[i + 1]; - b += data[i + 2]; - count++; - } - - r = Math.floor(r / count); - g = Math.floor(g / count); - b = Math.floor(b / count); - - const rgbColor = `rgb(${r}, ${g}, ${b})`; - resolve(rgbColor); - }); - } -}); +// script.js + +document.addEventListener('DOMContentLoaded', () => { + const imageInput = document.getElementById('imageInput'); + const addImageButton = document.getElementById('addImageButton'); + const gallery = document.getElementById('gallery'); + const fileNameSpan = document.getElementById('fileName'); + + // 파일 입력 변화 이벤트 리스너 + imageInput.addEventListener('change', () => { + const file = imageInput.files[0]; + if (file) { + fileNameSpan.textContent = file.name; + } else { + fileNameSpan.textContent = ''; + } + }); + + // 이미지 추가 버튼 클릭 이벤트 리스너 + addImageButton.addEventListener('click', () => { + const file = imageInput.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = function(e) { + const imgElement = document.createElement('img'); + imgElement.src = e.target.result; + imgElement.alt = 'Uploaded Image'; + + // 이미지 분석 및 배경색 결정 로직 + getAverageColor(imgElement).then(color => { + document.body.style.backgroundColor = color; + }).catch(error => { + console.error('Error calculating average color:', error); + }); + + const deleteButton = document.createElement('button'); + deleteButton.classList.add('delete-button'); + deleteButton.innerText = 'Delete'; + deleteButton.addEventListener('click', () => { + galleryItem.remove(); + }); + + const galleryItem = document.createElement('div'); + galleryItem.classList.add('gallery-item'); + galleryItem.appendChild(imgElement); + galleryItem.appendChild(deleteButton); + gallery.appendChild(galleryItem); + + imgElement.addEventListener('click', () => { + openLightbox(imgElement.src); + }); + + // 파일 선택 후 파일명 초기화 + imageInput.value = ''; + fileNameSpan.textContent = ''; + }; + reader.readAsDataURL(file); + } + }); + + // 이미지 클릭시 라이트박스 열기 + function openLightbox(src) { + const lightbox = document.createElement('div'); + lightbox.id = 'lightbox'; + lightbox.style.position = 'fixed'; + lightbox.style.top = '0'; + lightbox.style.left = '0'; + lightbox.style.width = '100%'; + lightbox.style.height = '100%'; + lightbox.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; + lightbox.style.display = 'flex'; + lightbox.style.alignItems = 'center'; + lightbox.style.justifyContent = 'center'; + lightbox.style.zIndex = '1000'; + lightbox.innerHTML = ``; + document.body.appendChild(lightbox); + + lightbox.addEventListener('click', () => { + lightbox.remove(); + }); + } + +});