stike

generateBtn.disabled = true; generateBtn.innerText = 'Procesando...'; loading.style.display = 'block'; shareWaBtn.style.display = 'none';

try { generatedWebpBlob = await processMediaToWebp(selectedFile); loading.style.display = 'none'; generateBtn.style.display = 'none'; generateBtn.disabled = false; generateBtn.innerText = 'Procesar a Sticker'; shareWaBtn.style.display = 'block'; } catch (error) { console.error("Error WP Sticker:", error); alert("Ocurrió un error al generar el sticker. Intenta con otro archivo."); loading.style.display = 'none'; generateBtn.disabled = false; generateBtn.innerText = 'Intentar de nuevo'; } });

shareWaBtn.addEventListener('click', async function() { if (!generatedWebpBlob) return; const file = new File([generatedWebpBlob], 'sticker.webp', { type: 'image/webp' });

if (navigator.canShare && navigator.canShare({ files: [file] })) { try { await navigator.share({ files: [file], title: 'Sticker', text: 'Sticker generado' }); } catch (error) { console.log('Share cancelado', error); } } else { const url = URL.createObjectURL(generatedWebpBlob); const a = document.createElement('a'); a.href = url; a.download = 'sticker.webp'; document.body.appendChild(a); a.click(); URL.revokeObjectURL(url); document.body.removeChild(a); } });

function processMediaToWebp(file) { return new Promise((resolve, reject) => { const isVideo = file.type.startsWith('video/') || file.type === 'image/gif'; const url = URL.createObjectURL(file); const canvas = document.createElement('canvas'); canvas.width = 512; canvas.height = 512; const ctx = canvas.getContext('2d');

if (isVideo) { const video = document.createElement('video'); video.autoplay = true; video.muted = true; video.src = url; video.onloadeddata = () => { renderToCanvas(video, canvas, ctx, resolve); URL.revokeObjectURL(url); }; video.onerror = reject; } else { const img = new Image(); img.onload = () => { renderToCanvas(img, canvas, ctx, resolve); URL.revokeObjectURL(url); }; img.onerror = reject; img.src = url; } }); }

function renderToCanvas(media, canvas, ctx, resolve) { ctx.clearRect(0, 0, canvas.width, canvas.height); const w = media.videoWidth || media.width; const h = media.videoHeight || media.height; const size = Math.min(w, h); const x = (w - size) / 2; const y = (h - size) / 2;

ctx.drawImage(media, x, y, size, size, 0, 0, canvas.width, canvas.height); canvas.toBlob((blob) => resolve(blob), 'image/webp', 0.8); } }); })();