<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transformation d'Image en 1 Bit, 4 Bits et 24 Bits</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
            background-color: #f4f4f9;
        }
        h1 {
            color: #333;
        }
        .container {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }
        .image-container {
            text-align: center;
        }
        .image-container canvas {
            max-width: 100%;
            height: auto;
        }
        input[type="file"] {
            margin: 20px 0;
        }
        .image-container h3 {
            color: #555;
        }
        .instructions {
            margin-top: 20px;
            font-size: 1.1em;
            color: #333;
        }
    </style>
</head>
<body>
    <div style="position: absolute; top: 20px; left: 10%; padding: 30px 20px; background-color: transparent;">
        <a href="https://sciences-tec.fr/cours"><img src="https://sciences-tec.fr/logo-nq8.png" alt="Logo Sciences-tec" style="max-width: 400px; height: auto;"></a>
    </div>

    <h1>Transformation d'Image en 1 Bit, 4 Bits et 24 Bits</h1>
    
    <input type="file" id="imageUpload" accept="image/*">
    <p class="instructions">Téléchargez une image pour voir sa transformation en 1 bit, 4 bits et 24 bits.</p>
    
    <div class="container">
        <div class="image-container">
            <h3>Image 1 Bit (Noir et Blanc)</h3>
            <canvas id="canvas1Bit"></canvas>
            <button id="download1Bit" style="display:none;">Télécharger Image 1 Bit</button>
        </div>        
        <div class="image-container">
            <h3>Image 4 Bits (16 Couleurs)</h3>
            <canvas id="canvas4Bits"></canvas>
            <button id="download4Bits" style="display:none;">Télécharger Image 4 Bits</button>
        </div>
        <div class="image-container">
            <h3>Image Originale (24 Bits)</h3>
            <canvas id="originalCanvas"></canvas>
            <button id="download24Bits" style="display:none;">Télécharger Image 24 Bits</button>
        </div>
    </div>

    <script>
        const imageUpload = document.getElementById('imageUpload');
        const originalCanvas = document.getElementById('originalCanvas');
        const canvas4Bits = document.getElementById('canvas4Bits');
        const canvas1Bit = document.getElementById('canvas1Bit');
        
        const download24Bits = document.getElementById('download24Bits');
        const download4Bits = document.getElementById('download4Bits');
        const download1Bit = document.getElementById('download1Bit');

        let uploadedFileName = "";  // Pour garder une trace du nom de fichier téléchargé

        imageUpload.addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (!file) return;

            // Extraire le nom du fichier sans extension
            uploadedFileName = file.name.replace(/\.[^/.]+$/, "");

            const reader = new FileReader();
            reader.onload = function(e) {
                const img = new Image();
                img.onload = function() {
                    const ctxOriginal = originalCanvas.getContext('2d');
                    const ctx4Bits = canvas4Bits.getContext('2d');
                    const ctx1Bit = canvas1Bit.getContext('2d');

                    const width = img.width;
                    const height = img.height;
                    originalCanvas.width = width;
                    originalCanvas.height = height;
                    canvas4Bits.width = width;
                    canvas4Bits.height = height;
                    canvas1Bit.width = width;
                    canvas1Bit.height = height;

                    ctxOriginal.drawImage(img, 0, 0, width, height);

                    // Appliquer la transformation 4 bits
                    apply4BitsTransformation(img, ctx4Bits, width, height);

                    // Appliquer la transformation 1 bit
                    apply1BitTransformation(img, ctx1Bit, width, height);

                    // Afficher les boutons de téléchargement
                    download24Bits.style.display = 'block';
                    download4Bits.style.display = 'block';
                    download1Bit.style.display = 'block';

                    // Ajouter les événements de téléchargement
                    download24Bits.onclick = function() {
                        downloadImage(originalCanvas, `${uploadedFileName}-24bits.png`);
                    };
                    download4Bits.onclick = function() {
                        downloadImage(canvas4Bits, `${uploadedFileName}-4bits.png`);
                    };
                    download1Bit.onclick = function() {
                        downloadImage(canvas1Bit, `${uploadedFileName}-1bit.png`);
                    };
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        });

        // Fonction pour transformer l'image en 4 bits (16 couleurs)
        function apply4BitsTransformation(image, ctx, width, height) {
            ctx.drawImage(image, 0, 0, width, height);
            const imageData = ctx.getImageData(0, 0, width, height);
            const data = imageData.data;

            for (let i = 0; i < data.length; i += 4) {
                const r = Math.floor(data[i] / 16) * 16;
                const g = Math.floor(data[i + 1] / 16) * 16;
                const b = Math.floor(data[i + 2] / 16) * 16;
                data[i] = r;
                data[i + 1] = g;
                data[i + 2] = b;
            }

            ctx.putImageData(imageData, 0, 0);
        }

        // Fonction pour transformer l'image en 1 bit (Noir et Blanc)
        function apply1BitTransformation(image, ctx, width, height) {
            ctx.drawImage(image, 0, 0, width, height);
            const imageData = ctx.getImageData(0, 0, width, height);
            const data = imageData.data;

            for (let i = 0; i < data.length; i += 4) {
                const brightness = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
                const color = brightness > 128 ? 255 : 0;
                data[i] = data[i + 1] = data[i + 2] = color;
            }

            ctx.putImageData(imageData, 0, 0);
        }

        // Fonction pour télécharger l'image
        function downloadImage(canvas, fileName) {
            const link = document.createElement('a');
            link.href = canvas.toDataURL();
            link.download = fileName;
            link.click();
        }
    </script>
</body>
</html>