Script conversion PNG > JPG
novembre 12, 2024
Convertisseur PNG vers 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.
Convertisseur PNG vers JPG
Glissez votre image PNG ici
ou
×
px
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>
/* Styles précédents inchangés */
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;
}
/* Nouveau style pour la case à cocher */
.checkbox-group {
margin: 10px 0;
}
</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 class="checkbox-group">
<label>
<input type="checkbox" id="keepRatio" checked> Maintenir le ratio
</label>
</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'),
keepRatio: document.getElementById('keepRatio'),
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;
let aspectRatio = 1;
// Event Listeners
els.fileInput.addEventListener('change', e => handleFile(e.target.files[0]));
els.quality.addEventListener('input', updateQuality);
els.width.addEventListener('input', handleDimensionChange.bind(null, 'width'));
els.height.addEventListener('input', handleDimensionChange.bind(null, 'height'));
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;
}
els.pngWeight.textContent = formatSize(file.size);
const reader = new FileReader();
reader.onload = e => {
originalImage = new Image();
originalImage.onload = () => {
originalWidth = originalImage.width;
originalHeight = originalImage.height;
aspectRatio = originalWidth / originalHeight;
els.width.value = originalWidth;
els.height.value = originalHeight;
els.pngPreview.src = originalImage.src;
convertImage();
};
originalImage.src = e.target.result;
};
reader.readAsDataURL(file);
}
function handleDimensionChange(dimension) {
if (els.keepRatio.checked) {
if (dimension === 'width') {
const newWidth = parseInt(els.width.value) || originalWidth;
els.height.value = Math.round(newWidth / aspectRatio);
} else {
const newHeight = parseInt(els.height.value) || originalHeight;
els.width.value = Math.round(newHeight * aspectRatio);
}
}
convertImage();
}
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;
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>
Précédent
Guide du Design de Page d'Accueil
Plus récent
CORS - Cross-Origin Resource Sharing
Vous aimerez aussi
Sécurisez Votre Réseau avec des Honeypots
Optimisez et Personnalisez Windows avec WinToys