Pemproses Imej Perduaan

mari buat

Pemproses Imej Perduaan.

Gambaran Keseluruhan Projek:
Cipta aplikasi web yang membolehkan pengguna memuat naik imej, memanipulasi data binari imej dan kemudian menyimpan imej yang diubah suai. Apl ini akan membolehkan pengguna menggunakan pelbagai kesan seperti skala kelabu, penyongsangan dan pelarasan kecerahan dengan mengubah suai data binari imej secara terus.
ciri utama:

1. muat naik fail
2. manipulasi binari
3. pratonton imej
4. pilihan imej muat turun

kami akan menggunakan HTML,CSS DAN JAVASCRIPT

html:

`>

Pemproses Imej Perduaan

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

*{
warna latar belakang: rgb(160, 226, 204);
}
badan {
font-family: Arial, sans-serif;
penjajaran teks: tengah;
pelapik: 20px;
}
#kanvas {
sempadan: 1px pepejal #000;
jidar atas: 20px;
}

**

javascript:

**

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

Const brightnessRange = document.getElementById('brightnessbtn');
brightnessRange.addEventListener('input', () => {
ctx.putImageData(originalImageData, 0, 0); // Tetapkan semula kepada asal sebelum menggunakan kecerahan
adjustBrightness(Nombor(brightnessRange.value));
});

document.getElementById('downloadbtn').addEventListener('click', () => {
pautan const = document.createElement('a');
link.download = 'modified-image.png';
link.href = canvas.toDataURL();
pautan.klik();
});

    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);

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

}
fungsi larasKecerahan(nilai) {
biarkan imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
biarkan 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);

}
`

Output untuk ini ditunjukkan di bawah:

Atas ialah kandungan terperinci Pemproses Imej Perduaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!