ボタンで画像のグレーネスを調整する（JavaScript）

Question

現在、プログラムはRGBの色を画像の半分に変更していますが、グレーの色合いを変更するだけのボタンを作る方法はわかりません。つまり、値0は白黒画像とスタートアップ画像の最大値になります。

ご協力いただきありがとうございます。

これは、現在のコードである：https://codeshare.io/5ezjmL

Answer 1

あなたが所望の効果を達成するためにsaturation blending modeを使用することができる：上部層の彩度を採用しながら

は、底層の輝度及び色相を保存します。ここで

ランダム画像上にこのブレンドモードを実証する例です。

// Desaturate given a factor between 0 - 1: 
 
function desaturate(ctx, factor, width, height) { 
 
    ctx.globalCompositeOperation = "saturation"; 
 
    ctx.fillStyle = "rgba(255,255,255,"+factor+")"; 
 
    ctx.fillRect(0, 0, width, height); 
 
} 
 

 
// Example: 
 
function randomize(ctx, width, height) { 
 
    let imageData = ctx.getImageData(0, 0, width, height), 
 
     data = imageData.data; 
 
    for (let i = 0; i < data.length; i += 4) { 
 
    let r = Math.random() * 256; 
 
    data[i + 0] = 255; data[i + 1] = r; data[i + 2] = 255 - r; 
 
    data[i + 3] = i/data.length * 256; 
 
    } 
 
    ctx.putImageData(imageData, 0, 0); 
 
} 
 

 
let canvas = document.getElementById("canvas"), 
 
    ctx = canvas.getContext("2d"), 
 
    input = document.getElementById("factor"); 
 

 
input.addEventListener("change", function(e) { 
 
    let factor = e.target.valueAsNumber; 
 
    randomize(ctx, canvas.width, canvas.height); 
 
    desaturate(ctx, factor, canvas.width, canvas.height); 
 
}); 
 

 
randomize(ctx, canvas.width, canvas.height);

<input id="factor" type="number" value="0" min="0" max="1" step="0.1"> 
 
<br> 
 
<canvas id="canvas">