javascript - 使用按钮调整图像的灰度(JavaScript)

Question

目前该程序将 RGB 颜色更改为图像的一半，我不知道如何制作仅更改灰色阴影的按钮。也就是说，值为 0 时为黑白图像，最大值为启动图像。

预先感谢您的帮助。

这是当前代码:https://codeshare.io/5ezjmL

Answer 1

您可以使用saturation blending mode达到预期效果:

Preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.

下面是在随机图像上演示此混合模式的示例:

// 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">