🖼️ Image to Base64

<div class="container">
            <h1>🖼️ Image to Base64</h1>

            <p class="subtitle">
                Convertis tes images en Base64 directement dans ton navigateur.
            </p>

            <div class="dropzone" id="dropzone">
                <h3>Dépose ton image ici</h3>
                <p>ou sélectionne un fichier sur ton ordinateur</p>

                
            </div>

            <div id="result" class="result hidden">
                <h2>Résultat</h2>

                <div class="metadata" id="metadata"></div>

                <img id="preview" class="preview" alt="Aperçu de l&apos;image" style="display: none">

                <label for="base64Output">
                    <strong>Chaîne Base64 (Data URI)</strong>
                </label>

                <textarea id="base64Output" readonly></textarea>

                <div class="actions">
                    <button id="copyButton" type="button">
                        📋 Copier le Base64
                    </button>

                    <button id="downloadButton" class="secondary" type="button">
                        💾 Télécharger .txt
                    </button>
                </div>

                <p id="status" class="status" role="status" aria-live="polite"></p>
            </div>
        </div>

* {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 40px 20px;
            font-family: Arial, sans-serif;
            background: #f1f5f9;
            color: #1e293b;
        }

        .container {
            max-width: 750px;
            margin: auto;
            padding: 30px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
        }

        h1 {
            margin-top: 0;
            text-align: center;
            color: #334155;
        }

        .subtitle {
            text-align: center;
            color: #64748b;
            margin-bottom: 30px;
        }

        .upload-zone {
            padding: 30px;
            text-align: center;
            border: 2px dashed #94a3b8;
            border-radius: 12px;
            background: #f8fafc;
        }

        input[type="file"] {
            display: block;
            width: 100%;
            margin: 20px 0;
        }

        button {
            padding: 12px 22px;
            border: none;
            border-radius: 8px;
            background: #4f46e5;
            color: white;
            font-size: 15px;
            cursor: pointer;
        }

        button:hover {
            background: #4338ca;
        }

        .error {
            margin-top: 20px;
            padding: 12px;
            color: #b91c1c;
            background: #fee2e2;
            border-radius: 8px;
        }

        .result {
            margin-top: 30px;
        }

        textarea {
            width: 100%;
            min-height: 180px;
            padding: 12px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            font-family: monospace;
            font-size: 12px;
            resize: vertical;
            overflow-wrap: anywhere;
        }

        .result-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px;
            margin-top: 12px;
        }

        .preview {
            display: block;
            max-width: 100%;
            max-height: 300px;
            margin: 20px auto;
            border-radius: 8px;
            object-fit: contain;
        }

        .size {
            color: #64748b;
            font-size: 13px;
        }

const fileInput = document.getElementById('fileInput');
const dropzone = document.getElementById('dropzone');
const result = document.getElementById('result');
const preview = document.getElementById('preview');
const output = document.getElementById('base64Output');
const metadata = document.getElementById('metadata');
const status = document.getElementById('status');

let currentBase64 = '';

preview.addEventListener('error', () => {
    preview.style.display = 'none';
});

preview.addEventListener('load', () => {
    preview.style.display = 'block';
});

// Sélection classique d'un fichier
fileInput.addEventListener('change', () => {
    if (fileInput.files.length) {
        convertImage(fileInput.files[0]);
    }
});

// Gestion du glisser-déposer
dropzone.addEventListener('dragover', event => {
    event.preventDefault();
    dropzone.classList.add('dragover');
});

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

dropzone.addEventListener('drop', event => {
    event.preventDefault();
    dropzone.classList.remove('dragover');

    const file = event.dataTransfer.files[0];

    if (file) {
        convertImage(file);
    }
});

// Conversion en Data URI Base64
function convertImage(file) {
    if (!file.type.startsWith('image/')) {
        alert('Merci de sélectionner une image valide.');
        return;
    }

    const reader = new FileReader();

    reader.onload = () => {
        currentBase64 = reader.result;
        output.value = currentBase64;
        preview.src = currentBase64;

        metadata.textContent =
            'Nom : ' + file.name +
            ' | Type : ' + file.type +
            ' | Taille originale : ' + formatBytes(file.size) +
            ' | Base64 : ' + currentBase64.length.toLocaleString('fr-FR') +
            ' caractères';

        result.classList.remove('hidden');
        status.textContent = 'Conversion terminée !';
    };

    reader.onerror = () => {
        alert('Impossible de lire ce fichier.');
    };

    reader.readAsDataURL(file);
}

// Formater une taille en octets
function formatBytes(bytes) {
    if (bytes < 1024) return bytes + ' octets';
    if (bytes < 1024 * 1024) {
        return (bytes / 1024).toFixed(1) + ' Ko';
    }

    return (bytes / (1024 * 1024)).toFixed(2) + ' Mo';
}

// Copier le résultat
document.getElementById('copyButton').addEventListener('click', async () => {
    try {
        await navigator.clipboard.writeText(currentBase64);
        status.textContent = 'Base64 copié dans le presse-papiers !';
    } catch {
        output.focus();
        output.select();

        const copied = document.execCommand('copy');
        status.textContent = copied
            ? 'Base64 copié !'
            : 'Sélectionne le texte et copie-le manuellement.';
    }
});

// Télécharger la chaîne dans un fichier texte
document.getElementById('downloadButton').addEventListener('click', () => {
    const blob = new Blob(
        [currentBase64],
        { type: 'text/plain;charset=utf-8' }
    );

    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');


    link.href = url;
    link.download = 'image-base64.txt';
    link.click();

    setTimeout(() => URL.revokeObjectURL(url), 1000);
    status.textContent = 'Téléchargement lancé.';
});