Aplicación Web Convertidora de Imágenes a Base64

Convert images ↔ Base64 · HTML-ready * { margin: 0; padding: 0; box-sizing: border-box; }

body { background: #0a0a0a; color: #e8e8e8; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 1.5rem 1rem 2rem; }

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

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

.site-header h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: #f0f0f0; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }

.prompts-link { font-size: 1.2rem; font-weight: 700; color: #39ff9e; /* phosphor green */ text-decoration: none; border-bottom: 1px dotted #39ff9e; transition: opacity 0.2s; margin-top: 0.25rem; display: inline-block; }

.prompts-link:hover { opacity: 0.8; border-bottom-style: solid; }

/* cards / sections */ .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; align-items: start; }

.card { background: #111111; border-radius: 24px; padding: 1.8rem 1.5rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 0 1px #2a2a2a inset; transition: box-shadow 0.2s; display: flex; flex-direction: column; gap: 1.2rem; }

.card h2 { font-size: 1.4rem; font-weight: 500; letter-spacing: -0.01em; border-left: 4px solid #ff7a1a; padding-left: 0.8rem; color: #f0f0f0; }

/* buttons */ .btn { background: #b34d00; /* dark orange */ border: none; color: white; font-weight: 600; padding: 0.8rem 1.4rem; border-radius: 40px; font-size: 0.95rem; cursor: pointer; box-shadow: 0 4px 12px rgba(255, 100, 0, 0.2); transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; letter-spacing: 0.3px; border: 1px solid rgba(255, 140, 0, 0.3); }

.btn:hover { background: #cc5a00; box-shadow: 0 6px 18px rgba(255, 120, 0, 0.45); transform: scale(1.02); }

.btn:active { transform: scale(0.98); }

.btn-outline { background: transparent; border: 1px solid #ff7a1a; color: #ff9a4d; box-shadow: none; }

.btn-outline:hover { background: rgba(255, 122, 26, 0.1); box-shadow: 0 0 12px rgba(255, 122, 26, 0.3); }

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

/* dropzone */ .drop-zone { border: 2px dashed #3a3a3a; border-radius: 20px; padding: 2rem 1rem; text-align: center; background: #0d0d0d; transition: border-color 0.2s, background 0.2s; cursor: pointer; }

.drop-zone.drag-over { border-color: #ff7a1a; background: #1a140e; }

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

.drop-zone .small-note { font-size: 0.8rem; color: #777; }

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

.preview-box img { max-width: 100%; max-height: 180px; border-radius: 8px; object-fit: contain; }

.data-area { background: #0d0d0d; border-radius: 16px; padding: 0.8rem; border: 1px solid #2a2a2a; font-family: 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace; font-size: 0.7rem; word-break: break-all; max-height: 120px; overflow-y: auto; color: #bdbdbd; white-space: pre-wrap; user-select: text; }

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

.input-field { background: #1c1c1c; border: 1px solid #333; border-radius: 40px; padding: 0.8rem 1.2rem; color: #f0f0f0; font-size: 0.9rem; width: 100%; transition: border 0.2s; }

.input-field:focus { outline: none; border-color: #ff7a1a; }

.label { font-size: 0.8rem; color: #aaa; margin-bottom: 0.3rem; display: block; }

.copy-feedback { color: #39ff9e; font-size: 0.8rem; margin-left: 0.5rem; opacity: 0; transition: opacity 0.2s; }

.copy-feedback.show { opacity: 1; }

.error-text { color: #ff7a6b; font-size: 0.8rem; background: #2a1210; padding: 0.4rem 0.8rem; border-radius: 30px; display: inline-block; }

.footer { margin-top: 2rem; text-align: center; font-size: 1rem; }

.footer a { color: #39ff9e; font-weight: 700; text-decoration: none; border-bottom: 1px dotted #39ff9e; }

.footer a:hover { border-bottom-style: solid; }

/* responsive */ @media (max-width: 800px) { .card-grid { grid-template-columns: 1fr; gap: 1.5rem; } .card { padding: 1.5rem 1.2rem; } }

@media (max-width: 480px) { .btn { width: 100%; } .flex-row { flex-direction: column; align-items: stretch; } }

/* scrollbar */ .data-area::-webkit-scrollbar { width: 6px; } .data-area::-webkit-scrollbar-track { background: #1a1a1a; } .data-area::-webkit-scrollbar-thumb { background: #ff7a1a; border-radius: 10px; } Convert images ↔ Base64 with HTML-ready output prompts.chat

📤 Image → Base64 Drop image here or click to browse

JPG / PNG / WEBP · max 5MB (handled chunked)

preview

MIME: - size: -

Base64 Data URL (truncated view) -

📋 Copy Data URL 🖼️ Copy HTML ⬇️ .txt ✓ copied HTML snippet:

🔍 Base64 → Image Paste Data URL or raw Base64 👁️ Preview Clear

Rendered image image will appear here

⚡ automatic MIME detection & correction (jpg/png/webp)

2026

(function() { // DOM elements const dropZone = document.getElementById('dropZone'); const fileInput = document.getElementById('fileInput'); const imagePreviewBox = document.getElementById('imagePreviewBox'); const mimeInfo = document.getElementById('mimeInfo'); const fileSizeInfo = document.getElementById('fileSizeInfo'); const dataUrlDisplay = document.getElementById('dataUrlDisplay'); const copyDataUrlBtn = document.getElementById('copyDataUrlBtn'); const copyHtmlBtn = document.getElementById('copyHtmlBtn'); const downloadTxtBtn = document.getElementById('downloadTxtBtn'); const copyFeedback = document.getElementById('copyFeedback'); const htmlSnippetPreview = document.getElementById('htmlSnippetPreview');

// right side const base64Input = document.getElementById('base64Input'); const previewBtn = document.getElementById('previewBtn'); const clearBtn = document.getElementById('clearBtn'); const validationError = document.getElementById('validationError'); const decodedPreviewBox = document.getElementById('decodedPreviewBox');

// state let currentDataUrl = null; // full data url let currentMime = null; let currentRawBase64 = '';

// ---------- helpers ---------- function showFeedback(text = '✓ copied') { copyFeedback.textContent = text; copyFeedback.classList.add('show'); setTimeout(() => copyFeedback.classList.remove('show'), 1800); }

function formatBytes(bytes) { if (bytes === 0) return '0 B'; const k = 1024; const sizes = ['B','KB','MB','GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]; }

// update UI after image conversion function setImageResult(dataUrl, mime, rawBase64, fileSize) { currentDataUrl = dataUrl; currentMime = mime; currentRawBase64 = rawBase64;

// preview imagePreviewBox.innerHTML = ` `; mimeInfo.textContent = `MIME: ${mime}`; fileSizeInfo.textContent = `size: ${formatBytes(fileSize || 0)}`;

// show truncated data url (first 120 chars + …) const truncated = dataUrl.length > 120 ? dataUrl.slice(0, 120) + '…' : dataUrl; dataUrlDisplay.textContent = truncated;

// html snippet preview const htmlSnippet = ` `; htmlSnippetPreview.textContent = htmlSnippet.length > 80 ? htmlSnippet.slice(0, 80) + '…' : htmlSnippet;

// store full snippet for copy window.__htmlSnippet = htmlSnippet; window.__dataUrl = dataUrl; }

// process file function processFile(file) { if (!file) return; // validate type if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) { alert('Unsupported format. Please use JPG, PNG or WEBP.'); return; } // size guard (5MB) if (file.size > 5 * 1024 * 1024) { alert('File too large (max 5MB). Please choose a smaller image.'); return; }

const reader = new FileReader(); reader.onload = (e) => { const dataUrl = e.target.result; // extract mime and base64 const mimeMatch = dataUrl.match(/^data:([^;]+);base64,/); if (!mimeMatch) { alert('Could not parse MIME.'); return; } const mime = mimeMatch[1]; const base64 = dataUrl.split(',')[1] || ''; setImageResult(dataUrl, mime, base64, file.size); }; reader.onerror = () => alert('Error reading file.'); reader.readAsDataURL(file); }

// ---------- event listeners ---------- // drop zone click dropZone.addEventListener('click', () => fileInput.click()); dropZone.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileInput.click(); } });

// drag and drop ['dragenter', 'dragover'].forEach(evt => { dropZone.addEventListener(evt, (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); }); }); ['dragleave', 'drop'].forEach(evt => { dropZone.addEventListener(evt, (e) => { e.preventDefault(); dropZone.classList.remove('drag-over'); }); }); dropZone.addEventListener('drop', (e) => { const files = e.dataTransfer.files; if (files.length > 0) processFile(files[0]); });

fileInput.addEventListener('change', (e) => { if (e.target.files.length > 0) processFile(e.target.files[0]); fileInput.value = ''; // allow same file });

// copy data url copyDataUrlBtn.addEventListener('click', () => { if (!currentDataUrl) { showFeedback('no image'); return; } navigator.clipboard.writeText(currentDataUrl).then(() => showFeedback('✓ Data URL')).catch(() => { // fallback const ta = document.createElement('textarea'); ta.value = currentDataUrl; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); showFeedback('✓ Data URL'); }); });

// copy html snippet copyHtmlBtn.addEventListener('click', () => { if (!window.__htmlSnippet) { showFeedback('no image'); return; } navigator.clipboard.writeText(window.__htmlSnippet).then(() => showFeedback('✓ HTML img')).catch(() => { const ta = document.createElement('textarea'); ta.value = window.__htmlSnippet; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); showFeedback('✓ HTML img'); }); });

// download as .txt downloadTxtBtn.addEventListener('click', () => { if (!currentDataUrl) { showFeedback('no image'); return; } const content = window.__htmlSnippet || currentDataUrl; const blob = new Blob([content], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'base64-image.txt'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showFeedback('⬇️ .txt'); });

// ---------- BASE64 TO IMAGE ---------- function detectMimeFromBase64(b64) { // check data url prefix const dataUrlMatch = b64.match(/^data:([^;]+);base64,/); if (dataUrlMatch) return dataUrlMatch[1].toLowerCase();

// try magic bytes from raw base64 try { const binary = atob(b64.slice(0, 30)); if (binary.startsWith('\x89PNG')) return 'image/png'; if (binary.startsWith('\xFF\xD8\xFF')) return 'image/jpeg'; if (binary.startsWith('RIFF') && binary.slice(8, 12) === 'WEBP') return 'image/webp'; } catch (e) { /* ignore */ } return null; }

function previewFromBase64() { let input = base64Input.value.trim(); validationError.style.display = 'none'; if (!input) { validationError.textContent = '⚠️ Paste a Data URL or raw Base64.'; validationError.style.display = 'inline-block'; decodedPreviewBox.innerHTML = ' image will appear here '; return; }

let dataUrl = ''; let mime = null;

// if it's already a data url if (input.startsWith('data:')) { const match = input.match(/^data:([^;]+);base64,(.*)$/s); if (match) { mime = match[1].toLowerCase(); const base64Part = match[2].replace(/\s/g, ''); dataUrl = `data:${mime};base64,${base64Part}`; } else { validationError.textContent = '❌ Invalid Data URL format.'; validationError.style.display = 'inline-block'; return; } } else { // raw base64 (strip whitespace) const raw = input.replace(/\s/g, ''); if (!/^[A-Za-z0-9+/]+={0,2}$/.test(raw) || raw.length % 4 !== 0) { validationError.textContent = '❌ Invalid Base64 characters or length.'; validationError.style.display = 'inline-block'; return; } mime = detectMimeFromBase64(raw); if (!mime) { // default to png? but we try to detect; if fails, show error validationError.textContent = '❌ Cannot detect image MIME (try JPG/PNG/WEBP).'; validationError.style.display = 'inline-block'; return; } dataUrl = `data:${mime};base64,${raw}`; }

// verify if image loads const img = new Image(); img.onload = () => { decodedPreviewBox.innerHTML = ''; decodedPreviewBox.appendChild(img); // optional auto correction: if mime mismatched, but image loads, we keep mime. // show success }; img.onerror = () => { validationError.textContent = '❌ Image decoding failed. Check Base64 or MIME.'; validationError.style.display = 'inline-block'; decodedPreviewBox.innerHTML = ' invalid image '; }; img.src = dataUrl; // also show in preview box immediately (optimistic) decodedPreviewBox.innerHTML = ' loading… '; }

previewBtn.addEventListener('click', previewFromBase64);

clearBtn.addEventListener('click', () => { base64Input.value = ''; validationError.style.display = 'none'; decodedPreviewBox.innerHTML = ' image will appear here '; });

// allow Enter key in textarea to trigger preview (Ctrl+Enter) base64Input.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); previewFromBase64(); } });

// initial demo (optional) - set a tiny transparent pixel? but not needed. // set default empty states })();

Aplicación Web Convertidora de Imágenes a Base64

Contenido del PromptGuardar

Uso

Referencias

Discusión