Script conversion PNG > JPG

J’avais besoin d’un utilitaire capable de convertir des images PNG en JPG tout en permettant de spécifier une taille définie pour chaque image convertie.

Après quelques recherches et avec l’aide de l’IA, j’ai pu concevoir un script qui répond parfaitement à ces exigences.
Ce script prend en charge la conversion du format PNG au format JPG tout en ajustant les dimensions de l’image de sortie selon les paramètres que j’ai définis.

Glissez votre PNG ici ou cliquez pour sélectionner

Dimensions: × px

Qualité: 85%

PNG Original

JPG Converti

Pour utiliser :

Chargez un PNG
Le poids du PNG s’affiche immédiatement
Modifiez les dimensions ou la qualité
Le poids du JPG se met à jour automatiquement
Téléchargez quand satisfait

Exemple :

Les poids des fichiers sont clairement visibles sous chaque image.

Code Source

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Jean-Paul, Mansouri">
    <meta name="description" content="Script de conversion d'images de PNG en JPG avec redimensionnement">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Convertisseur PNG vers JPG</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .drop-zone {
            border: 2px dashed #1a73e8;
            padding: 20px;
            text-align: center;
            margin: 20px 0;
            background: #f8f9fa;
            border-radius: 4px;
        }
        .preview {
            display: flex;
            gap: 20px;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        .preview-box {
            flex: 1;
            min-width: 300px;
            text-align: center;
        }
        .preview-box img {
            max-width: 100%;
            max-height: 300px;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .controls {
            background: #f8f9fa;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
            text-align: center;
        }
        button {
            background: #1a73e8;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 0 5px;
        }
        button:disabled {
            background: #ccc;
        }
        .file-weight {
            color: #666;
            font-size: 16px;
            margin-top: 10px;
            font-weight: bold;
        }
        input[type="range"] {
            width: 200px;
            margin: 0 10px;
        }
        input[type="number"] {
            width: 70px;
            padding: 5px;
            margin: 0 5px;
        }
        input[type="file"] {
            display: none;
        }
        .file-label {
            display: inline-block;
            padding: 10px 20px;
            background: #e3f2fd;
            color: #1a73e8;
            border-radius: 4px;
            cursor: pointer;
        }
        h1 {
            color: #1a73e8;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Convertisseur PNG vers JPG</h1>
        
        <div class="drop-zone" id="dropZone">
            <p>Glissez votre image PNG ici</p>
            <p>ou</p>
            <label class="file-label">
                <input type="file" id="fileInput" accept=".png">
                Choisir un fichier
            </label>
        </div>

        <div class="controls">
            <div style="margin-bottom: 15px;">
                <label>Dimensions: </label>
                <input type="number" id="width" placeholder="Largeur" min="1">
                ×
                <input type="number" id="height" placeholder="Hauteur" min="1">
                px
                <button id="resetSize">Taille originale</button>
            </div>
            <div>
                <label>Qualité: </label>
                <input type="range" id="quality" min="1" max="100" value="85">
                <span id="qualityValue">85%</span>
            </div>
        </div>

        <div class="preview">
            <div class="preview-box">
                <h3>PNG Original</h3>
                <img id="pngPreview">
                <div class="file-weight" id="pngWeight"></div>
            </div>
            <div class="preview-box">
                <h3>JPG Converti</h3>
                <img id="jpgPreview">
                <div class="file-weight" id="jpgWeight"></div>
            </div>
        </div>

        <div style="text-align: center;">
            <button id="downloadBtn" disabled>Télécharger JPG</button>
        </div>
    </div>

    <script>
        const els = {
            dropZone: document.getElementById('dropZone'),
            fileInput: document.getElementById('fileInput'),
            quality: document.getElementById('quality'),
            qualityValue: document.getElementById('qualityValue'),
            width: document.getElementById('width'),
            height: document.getElementById('height'),
            resetSize: document.getElementById('resetSize'),
            downloadBtn: document.getElementById('downloadBtn'),
            pngPreview: document.getElementById('pngPreview'),
            jpgPreview: document.getElementById('jpgPreview'),
            pngWeight: document.getElementById('pngWeight'),
            jpgWeight: document.getElementById('jpgWeight')
        };

        let originalImage = null;
        let jpgImage = null;
        let originalWidth = 0;
        let originalHeight = 0;

        // Event Listeners
        els.fileInput.addEventListener('change', e => handleFile(e.target.files[0]));
        els.quality.addEventListener('input', updateQuality);
        els.width.addEventListener('input', convertImage);
        els.height.addEventListener('input', convertImage);
        els.resetSize.addEventListener('click', resetSize);
        els.downloadBtn.addEventListener('click', downloadJpg);
        els.dropZone.addEventListener('drop', handleDrop);
        els.dropZone.addEventListener('dragover', e => e.preventDefault());

        function handleDrop(e) {
            e.preventDefault();
            handleFile(e.dataTransfer.files[0]);
        }

        function handleFile(file) {
            if (!file || !file.type.includes('png')) {
                alert('Veuillez sélectionner un fichier PNG');
                return;
            }

            // Afficher le poids du PNG
            els.pngWeight.textContent = formatSize(file.size);

            const reader = new FileReader();
            reader.onload = e => {
                originalImage = new Image();
                originalImage.onload = () => {
                    originalWidth = originalImage.width;
                    originalHeight = originalImage.height;
                    els.width.value = originalWidth;
                    els.height.value = originalHeight;
                    els.pngPreview.src = originalImage.src;
                    convertImage();
                };
                originalImage.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }

        function updateQuality() {
            els.qualityValue.textContent = els.quality.value + '%';
            if (originalImage) convertImage();
        }

        function resetSize() {
            els.width.value = originalWidth;
            els.height.value = originalHeight;
            convertImage();
        }

        function convertImage() {
            if (!originalImage) return;

            const width = parseInt(els.width.value) || originalWidth;
            const height = parseInt(els.height.value) || originalHeight;

            const canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;

            const ctx = canvas.getContext('2d');
            ctx.fillStyle = '#FFFFFF';
            ctx.fillRect(0, 0, width, height);
            ctx.drawImage(originalImage, 0, 0, width, height);

            const quality = els.quality.value / 100;
            jpgImage = canvas.toDataURL('image/jpeg', quality);
            els.jpgPreview.src = jpgImage;

            // Calculer et afficher le poids du JPG
            fetch(jpgImage)
                .then(res => res.blob())
                .then(blob => {
                    els.jpgWeight.textContent = formatSize(blob.size);
                });

            els.downloadBtn.disabled = false;
        }

        function downloadJpg() {
            const link = document.createElement('a');
            link.download = 'image.jpg';
            link.href = jpgImage;
            link.click();
        }

        function formatSize(bytes) {
            const sizes = ['B', 'KB', 'MB'];
            if (bytes === 0) return '0 B';
            const i = Math.floor(Math.log(bytes) / Math.log(1024));
            return Math.round(bytes / Math.pow(1024, i)) + ' ' + sizes[i];
        }
    </script>
</body>
</html>