Aplicativo Web Conversor de Imagens Base64

Convert images ↔ Base64 with HTML-ready output * { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

body { background-color: #0a0a0a; color: #e0e0e0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 1.5rem 1rem 2rem; line-height: 1.5; }

.app-container { max-width: 1200px; width: 100%; background: transparent; display: flex; flex-direction: column; gap: 1.75rem; }

/* header */ .site-header { text-align: center; margin-bottom: 0.25rem; }

.site-header h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; color: #f5f5f5; background: linear-gradient(145deg, #ffffff 0%, #c0c0c0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; }

.phosphor-link { font-weight: 800; font-size: 1.4rem; color: #39ff88; /* phosphor green */ text-decoration: none; transition: opacity 0.2s; letter-spacing: 0.02em; background: transparent; }

.phosphor-link:hover { opacity: 0.7; text-decoration: underline; text-underline-offset: 6px; }

/* cards / sections */ .card-grid { display: flex; flex-wrap: wrap; gap: 1.8rem; }

.card { background: #111111; border-radius: 24px; padding: 1.8rem 1.5rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px #2a2a2a inset; flex: 1 1 320px; transition: box-shadow 0.2s; backdrop-filter: blur(2px); }

.card h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.2rem; color: #f0f0f0; border-left: 4px solid #ff7a1a; padding-left: 0.9rem; }

/* buttons */ .btn { background-color: #c45f1a; /* dark orange */ border: none; color: #0a0a0a; font-weight: 700; padding: 0.8rem 1.4rem; border-radius: 60px; font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 0 0 rgba(255, 120, 20, 0); letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border: 1px solid #ff8c3a; }

.btn:hover { background-color: #e2701f; box-shadow: 0 0 18px rgba(255, 110, 20, 0.5); transform: scale(1.02); }

.btn:active { transform: scale(0.98); box-shadow: 0 0 8px rgba(255, 110, 20, 0.7); }

.btn-outline { background: transparent; border: 1px solid #ff8c3a; color: #ffb27a; }

.btn-outline:hover { background: #1f1f1f; color: #ffb27a; box-shadow: 0 0 12px rgba(255, 110, 20, 0.3); }

.btn-sm { padding: 0.4rem 1rem; font-size: 0.8rem; }

/* inputs & textarea */ .drop-zone { border: 2px dashed #3a3a3a; border-radius: 20px; padding: 2rem 1rem; text-align: center; margin: 1rem 0 1.2rem; transition: background 0.2s, border-color 0.2s; background: #0e0e0e; }

.drop-zone.drag-over { background: #1c1c1c; border-color: #ff8c3a; }

.drop-zone p { color: #aaa; font-size: 0.95rem; }

.file-input { display: none; }

.preview-box { background: #0a0a0a; border-radius: 16px; padding: 0.8rem; margin: 1rem 0; display: flex; justify-content: center; align-items: center; min-height: 120px; border: 1px solid #2a2a2a; }

.preview-box img { max-width: 100%; max-height: 220px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.8); }

.data-area { width: 100%; background: #0d0d0d; border: 1px solid #333; border-radius: 16px; padding: 0.8rem 1rem; color: #d4d4d4; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.75rem; word-break: break-all; resize: vertical; min-height: 100px; margin: 0.8rem 0; }

.data-area:focus { outline: 1px solid #ff8c3a; }

.row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin: 0.6rem 0; }

.copy-feedback { font-size: 0.8rem; color: #39ff88; margin-left: 0.5rem; font-weight: 600; opacity: 0.9; }

.muted { color: #8a8a8a; font-size: 0.8rem; }

.error-text { color: #ff7a6e; font-size: 0.85rem; margin-top: 0.5rem; }

.footer { margin-top: 2.5rem; text-align: center; border-top: 1px solid #222; padding-top: 1.5rem; }

.footer .phosphor-link { font-size: 1.2rem; }

/* responsive */ @media (max-width: 640px) { .card { padding: 1.2rem; } .btn { width: 100%; } .row { flex-direction: column; align-items: stretch; } }

/* phosphor green override for footer */ .footer .phosphor-link { color: #39ff88; } Convert images ↔ Base64 with HTML-ready output prompts.chat

🖼️ Imagem → Base64 Arraste uma imagem ou clique para selecionar

📋 Copiar Data URL 🖥️ Copiar ⬇️ .txt

🔍 Base64 → Imagem 👁️ Pré-visualizar Limpar Detecção automática de MIME (JPEG/PNG/WEBP).

2026

(function() { // DOM elements const dropZone = document.getElementById('dropZone'); const fileInput = document.getElementById('fileInput'); const imagePreviewBox = document.getElementById('imagePreviewBox'); const imagePreview = document.getElementById('imagePreview'); const base64Output = document.getElementById('base64Output'); const copyDataUrlBtn = document.getElementById('copyDataUrlBtn'); const copyHtmlTagBtn = document.getElementById('copyHtmlTagBtn'); const downloadTxtBtn = document.getElementById('downloadTxtBtn'); const copyFeedback = document.getElementById('copyFeedback'); const imgError = document.getElementById('imgError');

const base64Input = document.getElementById('base64Input'); const previewBtn = document.getElementById('previewBtn'); const clearBtn = document.getElementById('clearBtn'); const decodedPreviewBox = document.getElementById('decodedPreviewBox'); const decodedImage = document.getElementById('decodedImage'); const decodeError = document.getElementById('decodeError');

let currentDataUrl = ''; let currentMime = 'image/jpeg'; // default

// ---------- helpers ---------- function showFeedback(msg, isError = false) { copyFeedback.textContent = msg; copyFeedback.style.color = isError ? '#ff7a6e' : '#39ff88'; setTimeout(() => { copyFeedback.textContent = ''; }, 2500); }

function showError(element, msg) { element.textContent = msg; setTimeout(() => { element.textContent = ''; }, 4000); }

// detect MIME from base64 (magic bytes) function detectMimeFromBase64(b64) { // strip data URL prefix if present let clean = b64.replace(/^data:[^;]+;base64,/, ''); if (!clean) return 'image/jpeg'; // first bytes let bytes = atob(clean.slice(0, 12)); let code = bytes.charCodeAt(0).toString(16) + bytes.charCodeAt(1).toString(16); if (code === 'ffd8') return 'image/jpeg'; if (code === '8950') return 'image/png'; if (code === '5249') return 'image/webp'; // RIFF // fallback return 'image/jpeg'; }

// convert file to base64 data URL function fileToDataUrl(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (e) => resolve(e.target.result); reader.onerror = (err) => reject(err); reader.readAsDataURL(file); }); }

// ---------- image to base64 flow ---------- async function handleFile(file) { imgError.textContent = ''; if (!file) return; if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) { showError(imgError, 'Formato inválido. Use JPG, PNG ou WEBP.'); return; } try { const dataUrl = await fileToDataUrl(file); currentDataUrl = dataUrl; currentMime = file.type || detectMimeFromBase64(dataUrl); // preview imagePreview.src = dataUrl; imagePreviewBox.hidden = false; // output raw base64 (full data URL) base64Output.value = dataUrl; showFeedback('✅ Imagem convertida!'); } catch (err) { showError(imgError, 'Falha ao ler arquivo.'); } }

// drag & drop 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 file = e.dataTransfer.files[0]; if (file) handleFile(file); }); fileInput.addEventListener('change', (e) => { const file = e.target.files[0]; if (file) handleFile(file); fileInput.value = ''; });

// copy data URL copyDataUrlBtn.addEventListener('click', async () => { if (!base64Output.value) { showFeedback('⚠️ Nenhum dado', true); return; } try { await navigator.clipboard.writeText(base64Output.value); showFeedback('📋 Data URL copiado!'); } catch { base64Output.select(); document.execCommand('copy'); showFeedback('📋 Copiado (fallback)'); } });

// copy HTML img tag copyHtmlTagBtn.addEventListener('click', async () => { if (!base64Output.value) { showFeedback('⚠️ Nenhum dado', true); return; } const mime = currentMime || 'image/jpeg'; const htmlSnippet = ` `; try { await navigator.clipboard.writeText(htmlSnippet); showFeedback('🖥️ Tag copiada!'); } catch { // fallback const textarea = document.createElement('textarea'); textarea.value = htmlSnippet; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); textarea.remove(); showFeedback('🖥️ Tag copiada (fallback)'); } });

// download .txt downloadTxtBtn.addEventListener('click', () => { if (!base64Output.value) { showFeedback('⚠️ Nada para baixar', true); return; } const blob = new Blob([base64Output.value], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'base64-image.txt'; a.click(); URL.revokeObjectURL(url); showFeedback('⬇️ Download iniciado'); });

// ---------- base64 to image preview ---------- function previewFromInput() { decodeError.textContent = ''; let raw = base64Input.value.trim(); if (!raw) { showError(decodeError, 'Cole um Base64 ou Data URL.'); decodedPreviewBox.hidden = true; return; }

// validate base64 content try { const b64check = dataUrl.split(',')[1]; if (!b64check) throw new Error('sem dados'); // quick validation (atob) atob(b64check); } catch (err) { showError(decodeError, 'Base64 inválido ou corrompido.'); decodedPreviewBox.hidden = true; return; }

// set preview decodedImage.src = dataUrl; decodedPreviewBox.hidden = false; // also set currentDataUrl? not needed }

previewBtn.addEventListener('click', previewFromInput);

clearBtn.addEventListener('click', () => { base64Input.value = ''; decodedPreviewBox.hidden = true; decodeError.textContent = ''; });

// optional: paste event auto preview? we keep manual per spec. // but we can also handle paste? not required.

// initial focus // ensure footer link is correct // all good

// extra: prevent freezing for long strings (we use textarea, no heavy ops) // but we can add a note: no heavy sync loops.

// handle paste in base64Input for convenience? not required but nice base64Input.addEventListener('paste', () => { setTimeout(() => { // optional auto preview? we keep manual. }, 50); });

// drag&drop on dropzone already works // also allow click on dropzone to open file dropZone.addEventListener('click', (e) => { if (e.target.tagName !== 'LABEL') { fileInput.click(); } });

// avoid label click triggering twice document.querySelector('label[for="fileInput"]').addEventListener('click', (e) => e.stopPropagation());

// set default MIME for html tag copy // done })();

Aplicativo Web Conversor de Imagens Base64

Conteúdo do PromptSalvar

Uso

Referências

Discussão