바이너리 이미지 프로세서

을 만들어 보겠습니다.

바이너리 이미지 프로세서.

프로젝트 개요:
사용자가 이미지를 업로드하고 이미지의 이진 데이터를 조작한 다음 수정된 이미지를 저장할 수 있는 웹 애플리케이션을 만듭니다. 이 앱을 사용하면 사용자는 이미지의 바이너리 데이터를 직접 수정하여 회색조, 반전, 밝기 조정과 같은 다양한 효과를 적용할 수 있습니다.
주요 기능:

1. 파일 업로드
2. 바이너리 조작
3. 이미지 미리보기
4. 이미지 다운로드 옵션

우리는 HTML, CSS, JAVASCRIPT를 사용할 것입니다

html:

`>

바이너리 이미지 프로세서

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

*{
배경색: rgb(160, 226, 204);
}
몸 {
글꼴 계열: Arial, sans-serif;
텍스트 정렬: 중앙;
패딩: 20px;
}
#캔버스 {
테두리: 1px 실선 #000;
여백 상단: 20px;
}

**

자바스크립트:

**

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

const 밝기Range = document.getElementById('brightnessbtn');
밝기Range.addEventListener('input', () => {
ctx.putImageData(originalImageData, 0, 0); // 밝기를 적용하기 전 원본으로 재설정
adjustBrightness(Number(brightnessRange.value));
});

document.getElementById('downloadbtn').addEventListener('클릭', () => {
const link = document.createElement('a');
link.download = '수정된 이미지.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);

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

}
함수 adjustBrightness(값) {
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
데이터 = 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);

}
`

이에 대한 출력은 다음과 같습니다.

위 내용은 바이너리 이미지 프로세서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!