Base64画像変換ウェブアプリ

Convert images ↔ Base64 with HTML-ready output * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #000000; color: #e0e0e0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px; } .container { width: 100%; max-width: 1200px; flex: 1; } header { text-align: center; padding: 20px 0; border-bottom: 1px solid #1a1a1a; margin-bottom: 30px; } h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); color: #ffffff; margin-bottom: 10px; font-weight: 600; } .prompts-link { font-weight: bold; color: #00ff9d; text-decoration: none; font-size: 1.2rem; transition: opacity 0.3s; } .prompts-link:hover { opacity: 0.8; } .tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center; } .tab-btn { background: #1a1a1a; color: #e0e0e0; border: 1px solid #333; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 1rem; transition: all 0.3s ease; flex: 1; min-width: 200px; max-width: 300px; } .tab-btn.active { background: #cc5500; border-color: #cc5500; color: #ffffff; box-shadow: 0 0 15px rgba(204, 85, 0, 0.5); } .tab-btn:hover:not(.active) { background: #2a2a2a; border-color: #cc5500; } .panel { display: none; background: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 12px; padding: 20px; margin-bottom: 20px; } .panel.active { display: block; } .drop-zone { border: 2px dashed #333; border-radius: 12px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; margin-bottom: 20px; } .drop-zone:hover, .drop-zone.dragover { border-color: #cc5500; background: rgba(204, 85, 0, 0.1); } .drop-zone p { color: #888; font-size: 1.1rem; } .drop-zone input[type="file"] { display: none; } .btn { background: #cc5500; color: #ffffff; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 1rem; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(204, 85, 0, 0.3); } .btn:hover { background: #e06000; box-shadow: 0 0 20px rgba(204, 85, 0, 0.6); transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-secondary { background: #1a1a1a; border: 1px solid #333; box-shadow: none; } .btn-secondary:hover { background: #2a2a2a; box-shadow: 0 0 10px rgba(204, 85, 0, 0.3); } .preview-container { margin: 20px 0; padding: 15px; background: #1a1a1a; border-radius: 8px; min-height: 100px; display: flex; align-items: center; justify-content: center; } .preview-container img { max-width: 100%; max-height: 400px; border-radius: 4px; } .output-section { margin: 20px 0; } .output-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; } .output-label h3 { color: #ffffff; font-size: 1.1rem; } textarea { width: 100%; min-height: 150px; background: #1a1a1a; color: #e0e0e0; border: 1px solid #333; border-radius: 8px; padding: 12px; font-family: monospace; font-size: 0.9rem; resize: vertical; margin-bottom: 10px; } .copy-feedback { color: #00ff9d; font-size: 0.9rem; margin-left: 10px; opacity: 0; transition: opacity 0.3s; } .copy-feedback.show { opacity: 1; } .error-msg { color: #ff4444; font-size: 0.9rem; margin-top: 10px; padding: 10px; background: rgba(255, 68, 68, 0.1); border-radius: 4px; border-left: 3px solid #ff4444; } .success-msg { color: #00ff9d; font-size: 0.9rem; margin-top: 10px; padding: 10px; background: rgba(0, 255, 157, 0.1); border-radius: 4px; border-left: 3px solid #00ff9d; } .input-group { margin-bottom: 15px; } .input-group label { display: block; margin-bottom: 5px; color: #888; font-size: 0.9rem; } .input-group textarea { min-height: 100px; } .btn-group { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } footer { text-align: center; padding: 20px 0; margin-top: 30px; border-top: 1px solid #1a1a1a; width: 100%; } .footer-link { font-weight: bold; color: #00ff9d; text-decoration: none; font-size: 1.1rem; transition: opacity 0.3s; } .footer-link:hover { opacity: 0.8; } @media (max-width: 768px) { body { padding: 10px; } .tab-btn { min-width: 150px; } .panel { padding: 15px; } .btn { width: 100%; margin-bottom: 10px; } .btn-group { flex-direction: column; } } @media (max-width: 480px) { h1 { font-size: 1.3rem; } .tab-btn { min-width: 100%; } } Convert images ↔ Base64 with HTML-ready output prompts.chat

Image → Base64 Base64 → Image

Drag & drop an image here, or click to browse

Base64 Data URL Copy Download .txt ✓ Copied!

HTML Ready-to-Use Copy ✓ Copied!

Paste Base64 or Data URL here: Preview Image Clear

2026

// Tab switching function switchTab(tabId) { document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active')); document.querySelectorAll('.panel').forEach(panel => panel.classList.remove('active')); if (tabId === 'imageToBase64') { document.querySelectorAll('.tab-btn')[0].classList.add('active'); document.getElementById('imageToBase64').classList.add('active'); } else { document.querySelectorAll('.tab-btn')[1].classList.add('active'); document.getElementById('base64ToImage').classList.add('active'); } }

// Drag and drop functionality const dropZone = document.getElementById('dropZone'); dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('dragover'); });

dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('dragover'); });

dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('dragover'); const file = e.dataTransfer.files[0]; if (file && file.type.match(/^image\/(jpeg|png|webp)$/)) { handleFileSelect(file); } else { showError('Please drop a valid image file (JPG, PNG, or WEBP)'); } });

// File handling function handleFileSelect(file) { if (!file) return; if (!file.type.match(/^image\/(jpeg|png|webp)$/)) { showError('Please select a valid image file (JPG, PNG, or WEBP)'); return; }

const reader = new FileReader(); reader.onload = (e) => { const base64String = e.target.result; processImage(base64String, file.type); }; reader.onerror = () => { showError('Error reading file'); }; reader.readAsDataURL(file); }

function processImage(dataUrl, mimeType) { // Show preview const previewContainer = document.getElementById('imagePreviewContainer'); const preview = document.getElementById('imagePreview'); preview.src = dataUrl; previewContainer.style.display = 'flex';

// Set outputs const base64Output = document.getElementById('base64Output'); const htmlOutput = document.getElementById('htmlOutput'); base64Output.value = dataUrl; htmlOutput.value = ` `;

// Show output section document.getElementById('imageOutputSection').style.display = 'block';

// Clear any previous errors clearError(); }

// Copy to clipboard function copyToClipboard(elementId) { const element = document.getElementById(elementId); const text = element.value; if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(() => { showCopyFeedback(elementId); }).catch(() => { fallbackCopy(element); }); } else { fallbackCopy(element); } }

function fallbackCopy(element) { element.select(); element.setSelectionRange(0, 99999); document.execCommand('copy'); showCopyFeedback(element.id); }

function showCopyFeedback(elementId) { const feedbackId = elementId === 'base64Output' ? 'base64CopyFeedback' : 'htmlCopyFeedback'; const feedback = document.getElementById(feedbackId); feedback.classList.add('show'); setTimeout(() => { feedback.classList.remove('show'); }, 2000); }

// Download Base64 as .txt function downloadBase64() { const content = document.getElementById('base64Output').value; const blob = new Blob([content], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'base64-output.txt'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }

// Base64 to Image preview function previewFromBase64() { const input = document.getElementById('base64Input').value.trim(); clearError(); clearSuccess();

if (!input) { showError('Please enter a Base64 string or Data URL'); return; }

// Validate the data URL if (!dataUrl.match(/^data:image\/(jpeg|png|webp);base64,/)) { showError('Invalid data URL format. Expected format: data:image/jpeg;base64,...'); return; }

// Try to load the image const img = new Image(); img.onload = () => { const previewContainer = document.getElementById('base64PreviewContainer'); const preview = document.getElementById('base64Preview'); preview.src = dataUrl; previewContainer.style.display = 'flex'; showSuccess('Image loaded successfully!'); }; img.onerror = () => { showError('Invalid Base64 data. The string may be corrupted or not a valid image.'); }; img.src = dataUrl; }

function detectMimeType(base64String) { // Check the first few bytes of the decoded data try { const binary = atob(base64String.substring(0, 100)); const bytes = new Uint8Array(binary.length); for (let i = 0; i < binary.length; i++) { bytes[i] = binary.charCodeAt(i); }

// Check for JPEG (FF D8 FF) if (bytes[0] === 0xFF && bytes[1] === 0xD8 && bytes[2] === 0xFF) { return 'image/jpeg'; } // Check for PNG (89 50 4E 47) if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4E && bytes[3] === 0x47) { return 'image/png'; } // Check for WEBP (52 49 46 46 ... 57 45 42 50) if (bytes[0] === 0x52 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x46) { if (bytes[8] === 0x57 && bytes[9] === 0x45 && bytes[10] === 0x42 && bytes[11] === 0x50) { return 'image/webp'; } } } catch (e) { return null; } return null; }

function clearBase64Input() { document.getElementById('base64Input').value = ''; document.getElementById('base64PreviewContainer').style.display = 'none'; clearError(); clearSuccess(); }

// Error and success handling function showError(message) { const errorDiv = document.getElementById('base64Error'); errorDiv.textContent = message; errorDiv.style.display = 'block'; clearSuccess(); }

function clearError() { document.getElementById('base64Error').style.display = 'none'; }

function showSuccess(message) { const successDiv = document.getElementById('base64Success'); successDiv.textContent = message; successDiv.style.display = 'block'; clearError(); }

function clearSuccess() { document.getElementById('base64Success').style.display = 'none'; }

// Handle file input change document.getElementById('fileInput').addEventListener('change', (e) => { handleFileSelect(e.target.files[0]); e.target.value = ''; });

Base64画像変換ウェブアプリ

プロンプト内容保存

使い方

参考資料

ノート