const originalPreviewContainer = document.getElementById('original-preview-container'); const originalPlaceholder = document.getElementById('original-placeholder'); const originalImage = document.getElementById('original-image'); const originalInfo = document.getElementById('original-info');

const resultPreviewContainer = document.getElementById('result-preview-container'); const resultPlaceholder = document.getElementById('result-placeholder'); const resultImage = document.getElementById('result-image'); const resultContent = document.getElementById('result-content'); const resultInfo = document.getElementById('result-info'); const loadingSpinner = document.getElementById('loading-spinner');

// Variabel state aplikasi let originalFile = null; let originalImgElement = new Image(); let originalAspectRatio = 1;

// Fungsi untuk memformat ukuran file function formatFileSize(bytes) { if (bytes === 0) return '0 Bytes'; const k = 1024; const sizes = ['Bytes', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; }

// Event listener untuk input file imageInput.addEventListener('change', (e) => { const file = e.target.files[0]; if (file) { handleFile(file); } });

// Event listener untuk drag and drop fileInputLabel.addEventListener('dragover', (e) => { e.preventDefault(); fileInputLabel.classList.add('bg-indigo-50', 'border-indigo-500'); }); fileInputLabel.addEventListener('dragleave', (e) => { e.preventDefault(); fileInputLabel.classList.remove('bg-indigo-50', 'border-indigo-500'); }); fileInputLabel.addEventListener('drop', (e) => { e.preventDefault(); fileInputLabel.classList.remove('bg-indigo-50', 'border-indigo-500'); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith('image/')) { imageInput.files = e.dataTransfer.files; handleFile(file); } });

function handleFile(file) { originalFile = file; const reader = new FileReader();

reader.onload = (event) => { originalImgElement.src = event.target.result; originalImgElement.onload = () => { // Tampilkan preview gambar asli originalImage.src = event.target.result; originalImage.classList.remove('hidden'); originalPlaceholder.classList.add('hidden');

// Simpan rasio aspek dan isi input ukuran originalAspectRatio = originalImgElement.width / originalImgElement.height; widthInput.value = originalImgElement.width; heightInput.value = originalImgElement.height;

// Tampilkan info gambar asli originalInfo.textContent = `${originalImgElement.width}x${originalImgElement.height} | ${formatFileSize(originalFile.size)}`; fileInputText.textContent = originalFile.name;

// Aktifkan tombol proses processButton.disabled = false;

// Reset hasil sebelumnya resultContent.classList.add('hidden'); resultPlaceholder.classList.remove('hidden'); }; };

reader.readAsDataURL(file); }

// Event listener untuk input ukuran widthInput.addEventListener('input', () => { if (aspectRatioLock.checked) { const newWidth = parseInt(widthInput.value); if (!isNaN(newWidth) && newWidth > 0) { heightInput.value = Math.round(newWidth / originalAspectRatio); } } });

heightInput.addEventListener('input', () => { if (aspectRatioLock.checked) { const newHeight = parseInt(heightInput.value); if (!isNaN(newHeight) && newHeight > 0) { widthInput.value = Math.round(newHeight * originalAspectRatio); } } });

// Event listener untuk format select (menampilkan/menyembunyikan kualitas) formatSelect.addEventListener('change', () => { const format = formatSelect.value; if (format === 'jpeg' || format === 'webp') { qualityControl.classList.remove('hidden'); } else { qualityControl.classList.add('hidden'); } });

// Event listener untuk slider kualitas qualitySlider.addEventListener('input', () => { qualityValue.textContent = parseFloat(qualitySlider.value).toFixed(1); });

// Event listener untuk tombol proses processButton.addEventListener('click', () => { if (!originalFile) { alert('Silakan pilih gambar terlebih dahulu.'); return; }

// Tampilkan spinner loadingSpinner.classList.remove('hidden'); resultPlaceholder.classList.add('hidden'); resultContent.classList.add('hidden');

// Gunakan setTimeout untuk memastikan UI diperbarui sebelum proses berat dimulai setTimeout(() => { const width = parseInt(widthInput.value); const height = parseInt(heightInput.value); const format = formatSelect.value; const quality = parseFloat(qualitySlider.value);

if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0) { alert('Lebar dan tinggi harus berupa angka positif.'); loadingSpinner.classList.add('hidden'); resultPlaceholder.classList.remove('hidden'); return; } const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); // Gambar ulang gambar ke canvas dengan ukuran baru ctx.drawImage(originalImgElement, 0, 0, width, height); const mimeType = `image/${format}`; const dataUrl = canvas.toDataURL(mimeType, quality); // Tampilkan hasil resultImage.src = dataUrl; // Atur tombol unduh const filename = `gambar-diubah.${format}`; downloadButton.href = dataUrl; downloadButton.download = filename; // Hitung ukuran file baru canvas.toBlob((blob) => { if (blob) { resultInfo.textContent = `${width}x${height} | ${formatFileSize(blob.size)}`; } // Sembunyikan spinner dan tampilkan hasil loadingSpinner.classList.add('hidden'); resultContent.classList.remove('hidden'); }, mimeType, quality); }, 50); // delay 50ms });

// Polyfill untuk canvas.toBlob jika tidak ada if (!HTMLCanvasElement.prototype.toBlob) { Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { value: function (callback, type, quality) { var dataURL = this.toDataURL(type, quality).split(',')[1]; setTimeout(function() { var binStr = atob(dataURL), len = binStr.length, arr = new Uint8Array(len); for (var i = 0; i < len; i++) { arr[i] = binStr.charCodeAt(i); } callback(new Blob([arr], {type: type || 'image/png'})); }); } }); } });