Binärer Bildprozessor

Lassen Sie uns ein

erstellen

Binärer Bildprozessor.

Projektübersicht:
Erstellen Sie eine Webanwendung, die es Benutzern ermöglicht, ein Bild hochzuladen, die Binärdaten des Bildes zu bearbeiten und dann das geänderte Bild zu speichern. Mit der App können Benutzer verschiedene Effekte wie Graustufen, Invertierung und Helligkeitsanpassung anwenden, indem sie die Binärdaten des Bildes direkt ändern.
Hauptfunktionen:

1. Datei hochladen
2. Binäre Manipulation
3. Bildvorschau
4. Bild-Download-Option

wir verwenden HTML, CSS UND JAVASCRIPT

html:

`>

Binärer Bildprozessor

<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:

*{
Hintergrundfarbe: rgb(160, 226, 204);
}
Körper {
Schriftfamilie: Arial, serifenlos;
text-align: center;
Polsterung: 20px;
}
#Leinwand {
Rand: 1px durchgezogen #000;
Rand oben: 20px;
}

**

Javascript:

**

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

const BrightnessRange = document.getElementById('brightnessbtn');
BrightnessRange.addEventListener('input', () => {
ctx.putImageData(originalImageData, 0, 0); // Vor dem Anwenden der Helligkeit auf Original zurücksetzen
adjustBrightness(Number(brightnessRange.value));
});

document.getElementById('downloadbtn').addEventListener('click', () => {
const link = document.createElement('a');
link.download = 'modified-image.png';
link.href = canvas.toDataURL();
link.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);

}
Funktion applyInversion() {
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let 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);

}
Funktion adjustBrightness(value) {
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let 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);

}
`

Die Ausgabe hierfür wird unten angezeigt:

Das obige ist der detaillierte Inhalt vonBinärer Bildprozessor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!