Processeur d'images binaires

créons un

Processeur d'images binaires.

Aperçu du projet :
Créez une application Web qui permet aux utilisateurs de télécharger une image, de manipuler les données binaires de l'image, puis d'enregistrer l'image modifiée. L'application permettra aux utilisateurs d'appliquer divers effets tels que les niveaux de gris, l'inversion et le réglage de la luminosité en modifiant directement les données binaires de l'image.
Caractéristiques clés :

1. téléchargement de fichiers
2. manipulation binaire
3. aperçu de l'image
4. option de téléchargement d'image

nous utiliserons HTML,CSS ET JAVASCRIPT

html :

`>

Processeur d'images binaires

<input type="file" name="" id="fileinput" accept="image/*">
<br>
<button id="grayscalebtn">Apply GrayScale</button>
<button id="invertbtn">Apply Inversion</button>
<button id="brightnessbtn">Apply Brightness</button>
<input type="range" name="" id="brightnessrange" min="-100" max="100" value="0">
<br>
<canvas id="canvas"></canvas>
<br>
<button id="downloadbtn">Download Image</button>`

## css :

*{
couleur d'arrière-plan : rgb(160, 226, 204);
>
corps {
famille de polices : Arial, sans-serif ;
text-align: center;
remplissage : 20 px ;
>
#toile {
bordure : 1px solide #000;
marge supérieure : 20 px ;
>

**

javascript :

**

`document.getElementById('grayscalebtn').addEventListener('click', applyGrayscale);
document.getElementById('invertbtn').addEventListener('click', applyInversion);

const BrightRange = document.getElementById('brightnessbtn');
BrightRange.addEventListener('input', () => {
ctx.putImageData(originalImageData, 0, 0); // Réinitialiser à l'original avant d'appliquer la luminosité
ajusterBrightness(Number(brightnessRange.value));
});

document.getElementById('downloadbtn').addEventListener('click', () => {
const lien = document.createElement('a');
lien.download = 'image-modifiée.png';
lien.href = toile.toDataURL();
lien.click();
});

    const fileinput = document.getElementById('fileinput');
    const canvas =  document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    let originalImageData;
    fileinput.addEventListener('change',(event)=>{
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = function(e){
            const img = new Image();
            img.onload = function(){
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img,0,0);
                originalImageData = ctx.getImageData(0,0,canvas.width,canvas.height);

            }
            img.src = e.target.result;
        }
        reader.readAsDataURL(file);
    })
    function applyGrayscale() {
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let data = imageData.data;

for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];
    const grayscale = r * 0.3 + g * 0.59 + b * 0.11;
    data[i] = data[i + 1] = data[i + 2] = grayscale;
}

ctx.putImageData(imageData, 0, 0);

}
fonction applyInversion() {
laissez imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
laissez data = imageData.data;

for (let i = 0; i < data.length; i += 4) {
    data[i] = 255 - data[i];       // Red
    data[i + 1] = 255 - data[i + 1]; // Green
    data[i + 2] = 255 - data[i + 2]; // Blue
}

ctx.putImageData(imageData, 0, 0);

}
fonction ajusterBrightness(valeur) {
laissez imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
laissez data = imageData.data;

for (let i = 0; i < data.length; i += 4) {
    data[i] += value;       // Red
    data[i + 1] += value;   // Green
    data[i + 2] += value;   // Blue
}

ctx.putImageData(imageData, 0, 0);

}
`

Le résultat est affiché ci-dessous :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!