バイナリ画像プロセッサ

を作成しましょう

バイナリ画像プロセッサ。

プロジェクトの概要:
ユーザーが画像をアップロードし、画像のバイナリ データを操作し、変更した画像を保存できる Web アプリケーションを作成します。このアプリを使用すると、ユーザーは画像のバイナリ データを直接変更することで、グレースケール、反転、明るさ調整などのさまざまな効果を適用できます。
主な機能:

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、サンセリフ;
text-align: 中央;
パディング: 20px;
}
#canvas {
ボーダー: 1px ソリッド #000;
margin-top: 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); // 明るさを適用する前に元の状態にリセットします
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);

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

}
functionAdjustBrightness(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);

}
`

この出力を以下に示します。

以上がバイナリ画像プロセッサの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。