46 lines
1.9 KiB
HTML
46 lines
1.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Pixeliser une image</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<input type="file" id="imageInput" accept="image/*">
|
||
|
|
<br>
|
||
|
|
<button id="pixelateButton">Pixeliser l'image</button>
|
||
|
|
<br>
|
||
|
|
<a id="downloadLink" style="display: none" download="pixelated_image.jpg">Télécharger l'image pixelisée</a>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.getElementById("pixelateButton").addEventListener("click", function () {
|
||
|
|
var imageInput = document.getElementById("imageInput");
|
||
|
|
var canvas = document.createElement("canvas");
|
||
|
|
var ctx = canvas.getContext("2d");
|
||
|
|
var downloadLink = document.getElementById("downloadLink");
|
||
|
|
|
||
|
|
var image = new Image();
|
||
|
|
image.src = URL.createObjectURL(imageInput.files[0]);
|
||
|
|
|
||
|
|
image.onload = function () {
|
||
|
|
// Définissez la nouvelle largeur et hauteur pour l'image réduite (résolution plus basse)
|
||
|
|
var newWidth = 480; // Remplacez par la largeur souhaitée
|
||
|
|
var newHeight = 480; // Remplacez par la hauteur souhaitée
|
||
|
|
|
||
|
|
// Définissez la taille du canvas avec la nouvelle résolution
|
||
|
|
canvas.width = newWidth;
|
||
|
|
canvas.height = newHeight;
|
||
|
|
|
||
|
|
// Dessinez l'image sur le canvas avec la nouvelle résolution (ce qui la rendra pixelisée)
|
||
|
|
ctx.drawImage(image, 0, 0, newWidth, newHeight);
|
||
|
|
|
||
|
|
// Obtenez l'image réduite sous forme de base64
|
||
|
|
var pixelatedImage = canvas.toDataURL("image/jpeg"); // Vous pouvez également utiliser 'image/png'
|
||
|
|
|
||
|
|
// Affichez le lien de téléchargement et mettez l'image en tant que lien source
|
||
|
|
downloadLink.href = pixelatedImage;
|
||
|
|
downloadLink.style.display = "block";
|
||
|
|
};
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|