jombee/24web
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update 10620 황동화/script.js

Browse Source
This commit is contained in:
jombee 2024-06-25 07:14:57 +00:00
parent 11bc847641
commit 8fc4bc0a12
1 changed files with 83 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
10620 황동화/script.js
View File

@ -1,113 +1,83 @@
// script.js // script.js
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const imageInput = document.getElementById('imageInput'); const imageInput = document.getElementById('imageInput');
const addImageButton = document.getElementById('addImageButton'); const addImageButton = document.getElementById('addImageButton');
const gallery = document.getElementById('gallery'); const gallery = document.getElementById('gallery');
const fileNameSpan = document.getElementById('fileName'); const fileNameSpan = document.getElementById('fileName');
// 파일 입력 변화 이벤트 리스너 // 파일 입력 변화 이벤트 리스너
imageInput.addEventListener('change', () => { imageInput.addEventListener('change', () => {
const file = imageInput.files[0]; const file = imageInput.files[0];
if (file) { if (file) {
fileNameSpan.textContent = file.name; fileNameSpan.textContent = file.name;
} else { } else {
fileNameSpan.textContent = ''; fileNameSpan.textContent = '';
} }
}); });
// 이미지 추가 버튼 클릭 이벤트 리스너 // 이미지 추가 버튼 클릭 이벤트 리스너
addImageButton.addEventListener('click', () => { addImageButton.addEventListener('click', () => {
const file = imageInput.files[0]; const file = imageInput.files[0];
if (file) { if (file) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = function(e) { reader.onload = function(e) {
const imgElement = document.createElement('img'); const imgElement = document.createElement('img');
imgElement.src = e.target.result; imgElement.src = e.target.result;
imgElement.alt = 'Uploaded Image'; imgElement.alt = 'Uploaded Image';
// 이미지 분석 및 배경색 결정 로직 // 이미지 분석 및 배경색 결정 로직
getAverageColor(imgElement).then(color => { getAverageColor(imgElement).then(color => {
document.body.style.backgroundColor = color; document.body.style.backgroundColor = color;
}).catch(error => { }).catch(error => {
console.error('Error calculating average color:', error); console.error('Error calculating average color:', error);
}); });
const deleteButton = document.createElement('button'); const deleteButton = document.createElement('button');
deleteButton.classList.add('delete-button'); deleteButton.classList.add('delete-button');
deleteButton.innerText = 'Delete'; deleteButton.innerText = 'Delete';
deleteButton.addEventListener('click', () => { deleteButton.addEventListener('click', () => {
galleryItem.remove(); galleryItem.remove();
}); });
const galleryItem = document.createElement('div'); const galleryItem = document.createElement('div');
galleryItem.classList.add('gallery-item'); galleryItem.classList.add('gallery-item');
galleryItem.appendChild(imgElement); galleryItem.appendChild(imgElement);
galleryItem.appendChild(deleteButton); galleryItem.appendChild(deleteButton);
gallery.appendChild(galleryItem); gallery.appendChild(galleryItem);
imgElement.addEventListener('click', () => { imgElement.addEventListener('click', () => {
openLightbox(imgElement.src); openLightbox(imgElement.src);
}); });
// 파일 선택 후 파일명 초기화 // 파일 선택 후 파일명 초기화
imageInput.value = ''; imageInput.value = '';
fileNameSpan.textContent = ''; fileNameSpan.textContent = '';
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
}); });
// 이미지 클릭시 라이트박스 열기 // 이미지 클릭시 라이트박스 열기
function openLightbox(src) { function openLightbox(src) {
const lightbox = document.createElement('div'); const lightbox = document.createElement('div');
lightbox.id = 'lightbox'; lightbox.id = 'lightbox';
lightbox.style.position = 'fixed'; lightbox.style.position = 'fixed';
lightbox.style.top = '0'; lightbox.style.top = '0';
lightbox.style.left = '0'; lightbox.style.left = '0';
lightbox.style.width = '100%'; lightbox.style.width = '100%';
lightbox.style.height = '100%'; lightbox.style.height = '100%';
lightbox.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; lightbox.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
lightbox.style.display = 'flex'; lightbox.style.display = 'flex';
lightbox.style.alignItems = 'center'; lightbox.style.alignItems = 'center';
lightbox.style.justifyContent = 'center'; lightbox.style.justifyContent = 'center';
lightbox.style.zIndex = '1000'; lightbox.style.zIndex = '1000';
lightbox.innerHTML = `<img src="${src}" style="max-width: 90%; max-height: 90%;">`; lightbox.innerHTML = `<img src="${src}" style="max-width: 90%; max-height: 90%;">`;
document.body.appendChild(lightbox); document.body.appendChild(lightbox);
lightbox.addEventListener('click', () => { lightbox.addEventListener('click', () => {
lightbox.remove(); 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);
});
}
});