let originalImage = null; let currentFilter = 'none';

// Generate random ID randomIdSpan.textContent = Math.floor(Math.random() * 90000) + 10000;

// Upload area click handler uploadArea.addEventListener('click', function() { fileInput.click(); });

// Drag and drop handlers uploadArea.addEventListener('dragover', function(e) { e.preventDefault(); uploadArea.style.borderColor = '#ff5555'; uploadArea.style.backgroundColor = '#2a2a2a'; });

uploadArea.addEventListener('dragleave', function() { uploadArea.style.borderColor = '#555'; uploadArea.style.backgroundColor = ''; });

uploadArea.addEventListener('drop', function(e) { e.preventDefault(); uploadArea.style.borderColor = '#555'; uploadArea.style.backgroundColor = '';

if (e.dataTransfer.files.length) { fileInput.files = e.dataTransfer.files; handleFileSelect(e.dataTransfer.files[0]); } });

// File input change handler fileInput.addEventListener('change', function() { if (fileInput.files.length) { handleFileSelect(fileInput.files[0]); } });

// Filter button click handlers filterButtons.forEach(button => { button.addEventListener('click', function() { filterButtons.forEach(btn => btn.classList.remove('active')); this.classList.add('active'); currentFilter = this.dataset.filter; applyFilter(); }); });

// Apply button click handler applyBtn.addEventListener('click', function() { applyMugshotEffect(); });

// Download button click handler downloadBtn.addEventListener('click', function() { downloadImage(); });

// Reset button click handler resetBtn.addEventListener('click', function() { resetAll(); });

// Handle file selection function handleFileSelect(file) { if (!file.type.match('image.*')) { alert('Please select an image file.'); return; }

const reader = new FileReader();

reader.onload = function(e) { originalImage = new Image(); originalImage.onload = function() { imagePreview.src = e.target.result; imagePreview.style.display = 'block'; mugshotFrame.style.display = 'inline-block'; applyBtn.disabled = false; }; originalImage.src = e.target.result; };

reader.readAsDataURL(file); }

// Apply selected filter function applyFilter() { if (!originalImage) return;

const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = originalImage.width; canvas.height = originalImage.height;

ctx.drawImage(originalImage, 0, 0);

switch(currentFilter) { case 'grayscale': applyGrayscale(ctx, canvas.width, canvas.height); break; case 'sepia': applySepia(ctx, canvas.width, canvas.height); break; case 'contrast': applyContrast(ctx, canvas.width, canvas.height); break; default: // No filter }

imagePreview.src = canvas.toDataURL('image/jpeg'); }

// Filter functions function applyGrayscale(ctx, width, height) { const imageData = ctx.getImageData(0, 0, width, height); const data = imageData.data;

for (let i = 0; i < data.length; i += 4) { const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = avg; // R data[i + 1] = avg; // G data[i + 2] = avg; // B } ctx.putImageData(imageData, 0, 0); } function applySepia(ctx, width, height) { const imageData = ctx.getImageData(0, 0, width, height); const data = imageData.data; for (let i = 0; i < data.length; i += 4) { const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; data[i] = Math.min(255, (r * 0.393) + (g * 0.769) + (b * 0.189)); data[i + 1] = Math.min(255, (r * 0.349) + (g * 0.686) + (b * 0.168)); data[i + 2] = Math.min(255, (r * 0.272) + (g * 0.534) + (b * 0.131)); } ctx.putImageData(imageData, 0, 0); } function applyContrast(ctx, width, height) { const imageData = ctx.getImageData(0, 0, width, height); const data = imageData.data; const factor = 1.5; const intercept = 128 * (1 - factor); for (let i = 0; i < data.length; i += 4) { data[i] = data[i] * factor + intercept; data[i + 1] = data[i + 1] * factor + intercept; data[i + 2] = data[i + 2] * factor + intercept; } ctx.putImageData(imageData, 0, 0); } // Apply mugshot effect function applyMugshotEffect() { if (!originalImage) return; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = originalImage.width; canvas.height = originalImage.height; // Draw original image ctx.drawImage(originalImage, 0, 0); // Apply selected filter switch(currentFilter) { case 'grayscale': applyGrayscale(ctx, canvas.width, canvas.height); break; case 'sepia': applySepia(ctx, canvas.width, canvas.height); break; case 'contrast': applyContrast(ctx, canvas.width, canvas.height); break; default: // No filter } // Add dark vignette effect const gradient = ctx.createRadialGradient( canvas.width / 2, canvas.height / 2, canvas.height * 0.4, canvas.width / 2, canvas.height / 2, canvas.height * 0.7 ); gradient.addColorStop(0, 'rgba(0, 0, 0, 0)'); gradient.addColorStop(1, 'rgba(0, 0, 0, 0.7)'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); // Update the preview imagePreview.src = canvas.toDataURL('image/jpeg'); downloadBtn.disabled = false; } // Download the image function downloadImage() { const link = document.createElement('a'); link.download = 'celebrity-mugshot-' + randomIdSpan.textContent + '.jpg'; link.href = imagePreview.src; link.click(); } // Reset everything function resetAll() { fileInput.value = ''; imagePreview.src = ''; imagePreview.style.display = 'none'; mugshotFrame.style.display = 'none'; applyBtn.disabled = true; downloadBtn.disabled = true; originalImage = null; // Reset filter buttons filterButtons.forEach(btn => btn.classList.remove('active')); document.querySelector('.filter-btn[data-filter="none"]').classList.add('active'); currentFilter = 'none';

// Generate new random ID randomIdSpan.textContent = Math.floor(Math.random() * 90000) + 10000; } });