let selectedFile = null; let generatedPDF = null; const dropZone = document.getElementById('dropZone'); const fileInput = document.getElementById('fileInput'); const fileInfo = document.getElementById('fileInfo'); const fileName = document.getElementById('fileName'); const fileSize = document.getElementById('fileSize'); const removeFile = document.getElementById('removeFile'); const pdfOptions = document.getElementById('pdfOptions'); const convertBtn = document.getElementById('convertBtn'); const progressSection = document.getElementById('progressSection'); const progressFill = document.getElementById('progressFill'); const progressText = document.getElementById('progressText'); const fpsInput = document.getElementById('fpsInput'); const downloadBtn = document.getElementById('downloadBtn'); dropZone.addEventListener('click', () => fileInput.click()); dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); }); dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('drag-over'); }); dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('drag-over'); const files = e.dataTransfer.files; if (files.length > 0) { handleFileSelect(files[0]); } }); fileInput.addEventListener('change', (e) => { if (e.target.files.length > 0) { handleFileSelect(e.target.files[0]); } }); removeFile.addEventListener('click', () => { resetUpload(); }); downloadBtn.addEventListener('click', () => { if (generatedPDF) { downloadFile(generatedPDF.blob, generatedPDF.filename); } }); function handleFileSelect(file) { if (!file.type.includes('video')) { alert('Please select a valid video file'); return; } selectedFile = file; fileName.textContent = file.name; fileSize.textContent = formatFileSize(file.size); dropZone.style.display = 'none'; fileInfo.style.display = 'flex'; pdfOptions.style.display = 'block'; convertBtn.style.display = 'block'; } convertBtn.addEventListener('click', async () => { if (!selectedFile) return; convertBtn.disabled = true; progressSection.style.display = 'block'; progressFill.style.width = '0%'; try { await convertVideoToPDF(); } catch (error) { console.error('Conversion error:', error); progressText.textContent = 'Error: ' + error.message; progressText.style.color = '#c53030'; } finally { convertBtn.disabled = false; } }); async function convertVideoToPDF() { return new Promise((resolve, reject) => { const video = document.createElement('video'); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); video.preload = 'metadata'; video.onloadedmetadata = () => { canvas.width = video.videoWidth; canvas.height = video.videoHeight; const fps = parseFloat(fpsInput.value) || 1; const interval = 1 / fps; const duration = video.duration; const totalFrames = Math.floor(duration * fps); progressText.textContent = `Extracting frames (0/${totalFrames})...`; const frames = []; let currentFrame = 0; video.onseeked = () => { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); canvas.toBlob((blob) => { frames.push(blob); currentFrame++; const progress = (currentFrame / totalFrames) * 100; progressFill.style.width = progress + '%'; progressText.textContent = `Extracting frames (${currentFrame}/${totalFrames})...`; const nextTime = currentFrame * interval; if (nextTime < duration) { video.currentTime = nextTime; } else { progressText.textContent = 'Creating PDF...'; createPDFFromFrames(frames, canvas.width, canvas.height) .then(resolve) .catch(reject); } }, 'image/jpeg', 0.85); }; video.onerror = () => { reject(new Error('Failed to load video')); }; video.currentTime = 0; }; video.src = URL.createObjectURL(selectedFile); }); } async function createPDFFromFrames(frames, width, height) { return new Promise(async (resolve, reject) => { try { const pdf = createPDFDocument(); for (let i = 0; i < frames.length; i++) { const imgData = await blobToBase64(frames[i]); pdf.addPage(imgData, width, height); const progress = ((i + 1) / frames.length) * 100; progressFill.style.width = progress + '%'; progressText.textContent = `Creating PDF (${i + 1}/${frames.length})...`; } const pdfBlob = pdf.generate(); const filename = selectedFile.name.replace(/\.[^.]+$/, '.pdf'); generatedPDF = { blob: pdfBlob, filename: filename }; downloadFile(pdfBlob, filename); progressFill.style.width = '100%'; progressText.textContent = 'Conversion complete! PDF downloaded.'; progressText.style.color = '#48bb78'; downloadBtn.style.display = 'flex'; resolve(); } catch (error) { reject(error); } }); } function createPDFDocument() { const pages = []; return { addPage(imageData, width, height) { const aspectRatio = width / height; const pageWidth = 595; const pageHeight = pageWidth / aspectRatio; pages.push({ imageData, width: pageWidth, height: pageHeight }); }, generate() { let pdf = '%PDF-1.4\n'; const objects = []; let objectIndex = 1; const catalogObj = objectIndex++; const pagesObj = objectIndex++; const pageObjects = []; const imageObjects = []; for (let i = 0; i < pages.length; i++) { const pageObj = objectIndex++; const contentObj = objectIndex++; const imageObj = objectIndex++; pageObjects.push({ pageObj, contentObj, imageObj, data: pages[i] }); imageObjects.push(imageObj); } objects.push(`${catalogObj} 0 obj\n<< /Type /Catalog /Pages ${pagesObj} 0 R >>\nendobj\n`); const pageRefs = pageObjects.map(p => `${p.pageObj} 0 R`).join(' '); objects.push(`${pagesObj} 0 obj\n<< /Type /Pages /Kids [${pageRefs}] /Count ${pages.length} >>\nendobj\n`); for (let i = 0; i < pageObjects.length; i++) { const { pageObj, contentObj, imageObj, data } = pageObjects[i]; objects.push(`${pageObj} 0 obj\n<< /Type /Page /Parent ${pagesObj} 0 R /MediaBox [0 0 ${data.width} ${data.height}] /Contents ${contentObj} 0 R /Resources << /XObject << /Im${i} ${imageObj} 0 R >> >> >>\nendobj\n`); const content = `q\n${data.width} 0 0 ${data.height} 0 0 cm\n/Im${i} Do\nQ\n`; objects.push(`${contentObj} 0 obj\n<< /Length ${content.length} >>\nstream\n${content}\nendstream\nendobj\n`); const imgBase64 = data.imageData.split(',')[1]; objects.push(`${imageObj} 0 obj\n<< /Type /XObject /Subtype /Image /Width ${Math.floor(data.width)} /Height ${Math.floor(data.height)} /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /DCTDecode /Length ${imgBase64.length} >>\nstream\n${imgBase64}\nendstream\nendobj\n`); } let offset = pdf.length; const offsets = []; for (const obj of objects) { offsets.push(offset); pdf += obj; offset += obj.length; } const xrefOffset = pdf.length; pdf += 'xref\n'; pdf += `0 ${objectIndex}\n`; pdf += '0000000000 65535 f \n'; for (const off of offsets) { pdf += String(off).padStart(10, '0') + ' 00000 n \n'; } pdf += 'trailer\n'; pdf += `<< /Size ${objectIndex} /Root ${catalogObj} 0 R >>\n`; pdf += 'startxref\n'; pdf += xrefOffset + '\n'; pdf += '%%EOF'; return new Blob([pdf], { type: 'application/pdf' }); } }; } function blobToBase64(blob) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(blob); }); } function downloadFile(blob, filename) { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } 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 Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]; } function resetUpload() { selectedFile = null; generatedPDF = null; dropZone.style.display = 'block'; fileInfo.style.display = 'none'; pdfOptions.style.display = 'none'; convertBtn.style.display = 'none'; progressSection.style.display = 'none'; downloadBtn.style.display = 'none'; fileInput.value = ''; progressText.style.color = '#4a5568'; }