function b(r,c,e){const t=r.getImageData(0,0,c,e).data;let a=0,o=0,n=0,i=0;for(let s=0;s<t.length;s+=40)a+=t[s],o+=t[s+1],n+=t[s+2],i++;return a=Math.floor(a/i),o=Math.floor(o/i),n=Math.floor(n/i),"#"+((1<<24)+(a<<16)+(o<<8)+n).toString(16).slice(1)}async function y(r,c=.8,e=1200){return new Promise((m,t)=>{if(!r.type.match(/image.*/)){t(new Error("O arquivo não é uma imagem."));return}const a=new FileReader;a.readAsDataURL(r),a.onload=o=>{const n=new Image;n.src=o.target.result,n.onload=()=>{const i=n.naturalWidth,s=n.naturalHeight;let l=i,d=s;l>e&&(d=Math.round(d*e/l),l=e);const g=document.createElement("canvas");g.width=l,g.height=d;const p=g.getContext("2d");p.drawImage(n,0,0,l,d);const w=b(p,l,d);g.toBlob(h=>{if(!h){t(new Error("Erro ao processar."));return}const v=r.name.replace(/\.[^/.]+$/,"")+".webp",u=new File([h],v,{type:"image/webp",lastModified:Date.now()});m({file:u,meta:{originalSize:r.size,compressedSize:u.size,originalWidth:i,originalHeight:s,finalWidth:l,finalHeight:d,dominantColor:w}})},"image/webp",c)},n.onerror=i=>t(i)},a.onerror=o=>t(o)})}const E=document.getElementById("uploadInput"),x=document.getElementById("infoCompressed"),C=document.getElementById("previewCompressed"),D=document.getElementById("previewOriginal"),f=document.getElementById("infoOriginal"),I="Camiseta Developer Senior",$="89.90",B="Camiseta de algodão egípcio com estampa de código.";E.addEventListener("change",async r=>{const c=r.target.files[0];if(c){D.src=URL.createObjectURL(c),f.innerText="Carregando...";try{const e=await y(c);f.innerHTML=`
Tamanho: ${(e.meta.originalSize/1024).toFixed(2)} KB<br>
Dimensões: ${e.meta.originalWidth} x ${e.meta.originalHeight} px
`,C.src=URL.createObjectURL(e.file);const m=`<div style="
display:inline-block;
width:20px;
height:20px;
background-color:${e.meta.dominantColor};
border:1px solid #ccc;
vertical-align: middle;
margin-left: 5px;"></div>`;x.innerHTML=`
<strong>Metadados Extraídos:</strong><br>
Tamanho Final: ${(e.meta.compressedSize/1024).toFixed(2)} KB<br>
Dimensões Finais: ${e.meta.finalWidth} x ${e.meta.finalHeight} px<br>
Cor Predominante: ${e.meta.dominantColor} ${m}<br>
<hr>
<span style="color: green">Pronto para envio!</span>
`;const t=new FormData;t.append("title",I),t.append("price",$),t.append("description",B),t.append("image",e.file),t.append("meta_width",e.meta.finalWidth),t.append("meta_height",e.meta.finalHeight),t.append("meta_color",e.meta.dominantColor),t.append("meta_size",e.meta.compressedSize),console.log("Enviando para o servidor...");const a=await fetch("/products",{method:"POST",body:t}),o=await a.json();a.ok?(alert(`Sucesso! Produto ID ${o.id} criado.`),console.log(o)):alert("Erro: "+o.error)}catch(e){console.error(e),alert("Erro ao processar/enviar")}}});
|
Download
