PDF To Image Converter 2025

pdfjsLib.GlobalWorkerOptions.workerSrc="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";

const fileInput=document.getElementById("file"); const convertBtn=document.getElementById("convert"); const downloadZip=document.getElementById("downloadZip"); const clearBtn=document.getElementById("clear"); const images=document.getElementById("images"); const filename=document.getElementById("filename"); const bar=document.getElementById("bar"); const status=document.getElementById("status");

let file=null; let results=[];

fileInput.onchange=e=>{ file=e.target.files[0]; if(file){ filename.textContent=file.name; convertBtn.disabled=false; } };

convertBtn.onclick=async()=>{ if(!file) return;

convertBtn.disabled=true; downloadZip.disabled=true; images.innerHTML=""; results=[]; bar.style.width="0%"; status.textContent="Loading PDF...";

const buf=await file.arrayBuffer(); const pdf=await pdfjsLib.getDocument({data:buf}).promise;

for(let p=1;p<=pdf.numPages;p++){ status.textContent=`Rendering page ${p}/${pdf.numPages}`; const page=await pdf.getPage(p); const vp=page.getViewport({scale:1.5});const canvas=document.createElement("canvas"); canvas.width=vp.width; canvas.height=vp.height; const ctx=canvas.getContext("2d");await page.render({canvasContext:ctx,viewport:vp}).promise;const blob=await new Promise(r=>canvas.toBlob(r,"image/png")); const name=`page-${p}.png`; results.push({name,blob});

// preview const card=document.createElement("div"); card.className="imgcard"; const img=document.createElement("img"); img.src=canvas.toDataURL("image/png"); card.appendChild(img);

const b=document.createElement("button"); b.textContent="Download"; b.style="margin-top:6px;padding:6px;background:#2563eb;color:#fff;border:none;border-radius:6px;"; b.onclick=()=>{ const u=URL.createObjectURL(blob); const a=document.createElement("a"); a.href=u;a.download=name;a.click(); URL.revokeObjectURL(u); };

card.appendChild(b); images.appendChild(card);

bar.style.width=(p/pdf.numPages*100)+"%"; }

downloadZip.disabled=false; convertBtn.disabled=false; status.textContent="Done"; };

downloadZip.onclick=async()=>{ if(!results.length) return;

const zip=new JSZip(); results.forEach(r=>zip.file(r.name,r.blob)); const out=await zip.generateAsync({type:"blob"}); const url=URL.createObjectURL(out); const a=document.createElement("a"); a.href=url;a.download="images.zip";a.click(); URL.revokeObjectURL(url);

status.textContent="ZIP Ready"; };

clearBtn.onclick=()=>{ file=null; results=[]; images.innerHTML=""; filename.textContent="No file selected"; bar.style.width="0%"; status.textContent="Idle"; convertBtn.disabled=true; downloadZip.disabled=true; fileInput.value=""; };

})();