Convert Image Format Online — JPG PNG WebP Free

let _convimgs=[],_convfmt='image/jpeg'; function ev(e){e.preventDefault();} function handleConvImgs(fs){_convimgs.push(...Array.from(fs).filter(f=>f.type.startsWith('image/')));renderConv();} function renderConv(){ document.getElementById('fl5').innerHTML=_convimgs.map((f,i)=>``).join(''); document.getElementById('opts5').style.display=_convimgs.length>0?'flex':'none'; document.getElementById('act5').style.display=_convimgs.length>0?'flex':'none'; } function rmConv(i){_convimgs.splice(i,1);renderConv();} function resetConv(){_convimgs=[];renderConv();document.getElementById('res5').classList.remove('show');document.getElementById('prog5').style.display='none';} function setFmt(fmt,btn){ _convfmt=fmt; document.querySelectorAll('#opts5 .btn').forEach(b=>{b.style.background='var(--s2)';b.style.border='1px solid var(--border)';b.style.color='var(--text)';}); btn.style.background='rgba(99,102,241,.15)';btn.style.border='2px solid var(--accent)';btn.style.color='#a5b4fc'; document.getElementById('qopt5').style.display=(fmt==='image/png'||fmt==='image/bmp')?'none':''; } async function convertImgs(){ if(!_convimgs.length)return; const btn=document.getElementById('cv5btn');btn.disabled=true; document.getElementById('prog5').style.display='block'; const q=parseInt(document.getElementById('cq5').value)/100; const ext={['image/jpeg']:'jpg',['image/png']:'png',['image/webp']:'webp',['image/bmp']:'bmp'}[_convfmt]||'jpg'; const results=[]; for(let i=0;i<_convimgs.length;i++){ document.getElementById('pf5').style.width=Math.round(10+(i/_convimgs.length)*85)+'%'; document.getElementById('pl5').textContent=`Converting ${i+1}/${_convimgs.length}...`; const f=_convimgs[i]; const url=URL.createObjectURL(f); const img=await new Promise(r=>{const x=new Image();x.onload=()=>r(x);x.src=url;}); const c=document.createElement('canvas');c.width=img.naturalWidth;c.height=img.naturalHeight; c.getContext('2d').drawImage(img,0,0); const blob=await new Promise(r=>c.toBlob(r,_convfmt,q)); results.push({blob,name:f.name.replace(/\.[^.]+$/,'')+'.'+ext}); URL.revokeObjectURL(url); } document.getElementById('pf5').style.width='100%'; document.getElementById('pl5').textContent='Done!'; const list=document.getElementById('cv5list'); list.innerHTML=results.map((r,i)=>``).join(''); window._convresults=results; if(results.length>1){const ab=document.getElementById('cv5all');ab.style.display='';ab.onclick=()=>results.forEach((r,i)=>setTimeout(()=>{const url=URL.createObjectURL(r.blob);const a=document.createElement('a');a.href=url;a.download=r.name;a.click();},i*250));} document.getElementById('res5').classList.add('show'); btn.disabled=false; setTimeout(()=>{document.getElementById('prog5').style.display='none';},800); } function dlConv(i){const r=window._convresults[i];const url=URL.createObjectURL(r.blob);const a=document.createElement('a');a.href=url;a.download=r.name;a.click();}