バイナリ画像プロセッサ

を作成しましょう

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

プロジェクトの概要:
ユーザーが画像をアップロードし、画像のバイナリ データを操作し、変更した画像を保存できる 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 

<p>}<br>
function applyInversion() {<br>
    let imageData = ctx.getImageData(0, 0, Canvas.width, Canvas.height);<br>
    let data = imageData.data;</p>

<pre class="brush:php;toolbar:false">for (let i = 0; i 

<p>}<br>
functionAdjustBrightness(value) {<br>
    let imageData = ctx.getImageData(0, 0, Canvas.width, Canvas.height);<br>
    let data = imageData.data;</p>

<pre class="brush:php;toolbar:false">for (let i = 0; i 

<p>}<br>
`</p>

<p>この出力を以下に示します。</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172535459930308.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Binary Image Processor"></p>


          

            
        

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