Processing...

'; batchContainer.innerHTML = ''; batchResults.classList.add('hidden'); // Process each file for (let i = 0; i < uploadedFiles.length; i++) { const file = uploadedFiles[i]; progressValue.textContent = Math.round((i / uploadedFiles.length) * 100); document.querySelector('#conversionProgress > div > div').style.width = `${(i / uploadedFiles.length) * 100}%`; const gifData = await processImage(file); convertedGifs.push({ originalName: file.name, gifData: gifData }); } // Complete progress progressValue.textContent = '100'; document.querySelector('#conversionProgress > div > div').style.width = '100%'; // Display results if (convertedGifs.length === 1) { // Single file result const gifUrl = URL.createObjectURL(convertedGifs[0].gifData); previewContainer.innerHTML = ` `; downloadBtn.disabled = false; downloadBtn.classList.remove('opacity-70', 'cursor-not-allowed'); } else { // Multiple files result previewContainer.innerHTML = '

Batch conversion complete. Download individual files below.

'; batchResults.classList.remove('hidden'); convertedGifs.forEach((gif, index) => { const gifUrl = URL.createObjectURL(gif.gifData); const card = document.createElement('div'); card.className = 'bg-gray-50 p-4 rounded-lg'; card.innerHTML = `

${gif.originalName.replace('.jpg', '').replace('.jpeg', '')}.gif

${formatFileSize(gif.gifData.size)}

Download `; batchContainer.appendChild(card); }); // Add event listeners to individual download buttons document.querySelectorAll('.download-individual').forEach(btn => { btn.addEventListener('click', function() { const index = this.getAttribute('data-index'); downloadGif(convertedGifs[index].gifData, convertedGifs[index].originalName.replace('.jpg', '').replace('.jpeg', '') + '.gif'); }); }); } } catch (error) { console.error('Conversion error:', error); previewContainer.innerHTML = '

Error converting image. Please try again.

'; } convertBtn.disabled = false; convertBtn.innerHTML = ` Convert to GIF `; // Hide progress bar setTimeout(() => { conversionProgress.classList.add('hidden'); }, 2000); } function processImage(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = function(e) { const img = new Image(); img.onload = function() { // Create canvas with the same dimensions as the image const canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext('2d'); // Draw image to canvas ctx.drawImage(img, 0, 0); // Get image data from canvas const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // Create a simple GIF using a library-free approach const gifData = createSimpleGif(imageData); resolve(gifData); }; img.onerror = function() { reject(new Error('Failed to load image')); }; img.src = e.target.result; }; reader.onerror = function() { reject(new Error('Failed to read file')); }; reader.readAsDataURL(file); }); } function createSimpleGif(imageData) { // Create a canvas to convert the image to a data URL const canvas = document.createElement('canvas'); canvas.width = imageData.width; canvas.height = imageData.height; const ctx = canvas.getContext('2d'); ctx.putImageData(imageData, 0, 0); // Convert canvas to data URL const dataUrl = canvas.toDataURL('image/png'); // Convert data URL to blob const byteString = atob(dataUrl.split(',')[1]); const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0]; const ab = new ArrayBuffer(byteString.length); const ia = new Uint8Array(ab); for (let i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } // Create blob with image/gif type to simulate GIF conversion return new Blob([ab], {type: 'image/gif'}); } // Download button event downloadBtn.addEventListener('click', function() { if (convertedGifs.length === 1) { downloadGif(convertedGifs[0].gifData, convertedGifs[0].originalName.replace('.jpg', '').replace('.jpeg', '') + '.gif'); } }); function downloadGif(blob, fileName) { const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = fileName; document.body.appendChild(link); link.click(); document.body.removeChild(link); } // Reset button event resetBtn.addEventListener('click', function() { jpgInput.value = ''; uploadedFiles = []; convertedGifs = []; fileList.innerHTML = '

No files selected

'; previewContainer.innerHTML = '

Your GIF preview will appear here after conversion

'; downloadBtn.disabled = true; downloadBtn.classList.add('opacity-70', 'cursor-not-allowed'); batchResults.classList.add('hidden'); batchContainer.innerHTML = ''; conversionProgress.classList.add('hidden'); }); // Initialize file list updateFileList(); });