Base64-Bildkonverter Web-App

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

body { background: #0a0a0a; color: #e0e0e0; 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-wrapper { max-width: 1200px; width: 100%; background: transparent; display: flex; flex-direction: column; gap: 1.5rem; }

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

.site-header h1 { font-size: clamp(1.6rem, 5vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: #f5f5f5; background: linear-gradient(135deg, #f0f0f0 0%, #b0b0b0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; }

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

.prompts-link:hover { opacity: 0.8; text-decoration: underline; text-underline-offset: 6px; }

/* main cards */ .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; margin: 1rem 0; }

@media (max-width: 760px) { .card-grid { grid-template-columns: 1fr; gap: 2rem; } }

.card { background: #111111; border-radius: 28px; padding: 1.8rem 1.5rem; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.03); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; gap: 1.2rem; backdrop-filter: blur(2px); }

.card:hover { box-shadow: 0 20px 35px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 140, 0, 0.2); }

.card-title { font-size: 1.5rem; font-weight: 600; color: #fff; border-bottom: 1px solid #2a2a2a; padding-bottom: 0.6rem; letter-spacing: -0.01em; }

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

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

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

.btn { background: #c85a00; /* dark orange */ border: none; color: white; font-weight: 600; padding: 0.8rem 1.6rem; border-radius: 50px; font-size: 0.95rem; cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.1s; box-shadow: 0 4px 12px rgba(200, 90, 0, 0.3); letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }

.btn:hover { background: #e06e10; box-shadow: 0 6px 18px rgba(230, 110, 20, 0.5); transform: translateY(-1px); }

.btn:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(200, 90, 0, 0.4); }

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

.btn-outline:hover { background: rgba(255, 140, 46, 0.1); box-shadow: 0 0 12px rgba(255, 140, 46, 0.2); }

.btn-block { width: 100%; }

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

.input-field { width: 100%; background: #0d0d0d; border: 1px solid #2c2c2c; border-radius: 18px; padding: 0.9rem 1.2rem; color: #e5e5e5; font-size: 0.9rem; font-family: 'SF Mono', 'Fira Code', monospace; resize: vertical; min-height: 120px; transition: border 0.2s; }

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

.preview-box { background: #0a0a0a; border-radius: 18px; padding: 1rem; border: 1px solid #222; min-height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; max-height: 260px; }

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

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

.copy-feedback { color: #39ff9e; font-size: 0.8rem; margin-left: 0.5rem; font-weight: 500; }

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

.footer { margin-top: 2.5rem; text-align: center; font-size: 1.2rem; color: #777; }

.footer a { color: #39ff9e; font-weight: 800; text-decoration: none; font-size: 1.4rem; margin-left: 0.3rem; }

.footer a:hover { text-decoration: underline; }

.hidden { display: none; }

.mime-badge { background: #1f1f1f; padding: 0.2rem 0.8rem; border-radius: 30px; font-size: 0.75rem; color: #aaa; }

.separator { border-top: 1px solid #2a2a2a; margin: 0.8rem 0; }

/* mobile tweaks */ @media (max-width: 480px) { .card { padding: 1.2rem; } .btn { width: 100%; } } Convert images ↔ Base64 with HTML-ready output prompts.chat

🖼️ Image → Base64 Drag & drop or click to upload

JPG / PNG / WEBP

- -

Base64 will appear here

📋 Copy Base64 ⬇️ .txt

🔁 Base64 → Image 👁️ Preview Clear Image preview appears here HTML snippet will appear here 📋 Copy HTML snippet

(function() { // DOM elements const dropZone = document.getElementById('dropZone'); const fileInput = document.getElementById('fileInput'); const imgPreviewContainer = document.getElementById('imgPreviewContainer'); const imgPreview = document.getElementById('imgPreview'); const mimeBadge = document.getElementById('mimeBadge'); const fileSizeInfo = document.getElementById('fileSizeInfo'); const base64Output = document.getElementById('base64Output'); const copyBase64Btn = document.getElementById('copyBase64Btn'); const downloadTxtBtn = document.getElementById('downloadTxtBtn'); const copyFeedback1 = document.getElementById('copyFeedback1');

const base64Input = document.getElementById('base64Input'); const previewBtn = document.getElementById('previewBtn'); const clearBtn = document.getElementById('clearBtn'); const previewResult = document.getElementById('previewResult'); const validationError = document.getElementById('validationError'); const htmlSnippetOutput = document.getElementById('htmlSnippetOutput'); const copyHtmlBtn = document.getElementById('copyHtmlBtn'); const copyFeedback2 = document.getElementById('copyFeedback2');

let currentBase64DataUrl = ''; // store full data url let currentMime = 'image/jpeg';

// ---------- Image to Base64 flow ---------- function handleFile(file) { if (!file) return; // reset validationError.textContent = ''; copyFeedback1.textContent = ''; copyFeedback2.textContent = '';

const allowedTypes = ['image/jpeg', 'image/png', 'image/webp']; if (!allowedTypes.includes(file.type)) { alert('Unsupported format. Please use JPG, PNG or WEBP.'); return; }

const reader = new FileReader(); reader.onload = function(e) { const dataUrl = e.target.result; currentBase64DataUrl = dataUrl; // extract mime from data url const mimeMatch = dataUrl.match(/^data:([^;]+);/); if (mimeMatch) { currentMime = mimeMatch[1]; } else { currentMime = file.type; }

// show preview imgPreview.src = dataUrl; imgPreviewContainer.classList.remove('hidden'); mimeBadge.textContent = currentMime; mimeBadge.classList.remove('hidden'); fileSizeInfo.textContent = (file.size / 1024).toFixed(2) + ' KB';

// output base64 (full data url) base64Output.textContent = dataUrl; base64Output.scrollTop = 0; }; reader.onerror = function() { alert('Failed to read file.'); }; reader.readAsDataURL(file); }

// drag & drop events dropZone.addEventListener('click', () => fileInput.click()); 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 files = e.dataTransfer.files; if (files.length > 0) { handleFile(files[0]); } }); fileInput.addEventListener('change', (e) => { if (e.target.files.length > 0) { handleFile(e.target.files[0]); } fileInput.value = ''; // allow same file re-upload });

// copy base64 copyBase64Btn.addEventListener('click', async () => { if (!currentBase64DataUrl) { copyFeedback1.textContent = 'No image loaded'; setTimeout(() => copyFeedback1.textContent = '', 2000); return; } try { await navigator.clipboard.writeText(currentBase64DataUrl); copyFeedback1.textContent = '✅ Copied!'; setTimeout(() => copyFeedback1.textContent = '', 2000); } catch (err) { // fallback const textarea = document.createElement('textarea'); textarea.value = currentBase64DataUrl; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); copyFeedback1.textContent = '✅ Copied!'; setTimeout(() => copyFeedback1.textContent = '', 2000); } });

// download txt downloadTxtBtn.addEventListener('click', () => { if (!currentBase64DataUrl) { alert('No base64 to download'); return; } const blob = new Blob([currentBase64DataUrl], { 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); });

// ---------- Base64 to Image preview flow ---------- function extractDataUrl(input) { // trim let str = input.trim(); if (!str) return { valid: false, error: 'Empty input' };

// if it's already a data url if (str.startsWith('data:')) { // validate basic pattern const match = str.match(/^data:([^;,]+)?(;base64)?,/); if (match) { return { valid: true, dataUrl: str, mime: match[1] || 'image/png' }; } else { return { valid: false, error: 'Invalid Data URL format' }; } }

// raw base64 (no prefix) - assume image/png or try to detect? we'll default to png but also try jpeg // check if it's base64 string (simple regex) const base64Regex = /^[A-Za-z0-9+/]+={0,2}$/; if (base64Regex.test(str)) { // try to detect mime by magic numbers? we'll just default to png, but we can attempt jpeg detection // first 3 bytes: /9j/ for jpeg, iVBOR for png, UklGR for webp let mime = 'image/png'; if (str.startsWith('/9j/')) mime = 'image/jpeg'; else if (str.startsWith('UklGR')) mime = 'image/webp'; else if (str.startsWith('iVBOR')) mime = 'image/png'; return { valid: true, dataUrl: `data:${mime};base64,${str}`, mime }; } else { return { valid: false, error: 'Invalid Base64 string' }; } }

previewBtn.addEventListener('click', () => { const input = base64Input.value; const result = extractDataUrl(input); if (!result.valid) { validationError.textContent = result.error; previewResult.innerHTML = ' Invalid input '; htmlSnippetOutput.textContent = ''; return; } validationError.textContent = ''; renderPreview(result.dataUrl); });

clearBtn.addEventListener('click', () => { base64Input.value = ''; previewResult.innerHTML = ' Image preview appears here '; htmlSnippetOutput.textContent = ''; validationError.textContent = ''; copyFeedback2.textContent = ''; });

// copy html snippet copyHtmlBtn.addEventListener('click', async () => { const snippet = htmlSnippetOutput.textContent; if (!snippet) { copyFeedback2.textContent = 'No snippet yet'; setTimeout(() => copyFeedback2.textContent = '', 2000); return; } try { await navigator.clipboard.writeText(snippet); copyFeedback2.textContent = '✅ HTML copied!'; setTimeout(() => copyFeedback2.textContent = '', 2000); } catch (err) { const textarea = document.createElement('textarea'); textarea.value = snippet; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); copyFeedback2.textContent = '✅ HTML copied!'; setTimeout(() => copyFeedback2.textContent = '', 2000); } });

// optional: auto preview if paste contains data url? we keep manual.

// keyboard: dropzone accessible dropZone.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileInput.click(); } });

// initial footer is static, but we already have 2026 link. })();

Base64-Bildkonverter Web-App

Prompt-InhaltSpeichern

Verwendung

Referenzen

Diskussion