使用 RGB 值获取颜色的灰色阴影

Question

我正在尝试为 canvas 创建一个滤镜，用于绘制图像的单色版本。我正在绘制图像，然后遍历图像数据，然后将这些 rgb 值更改为灰色，然后将图像数据放入 canvas。我需要有关如何从 rgb 值创建灰色阴影的帮助。我想要一个 javascript 解决方案。

我的代码：

function toGray(vals) {
  var r = vals[0]
  var g = vals[1]
  var b = vals[2]
  // Return gray shade
}
function filter() {
  var c = document.getElementById("canvas1");
  var ctx = c.getContext("2d");
  var img = document.createElement('img')
  img.src = 'shaq.png'
  img.onload = function() {
    ctx.drawImage(img, 0, 0, c.width, c.height);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
    var i;
    for (i = 0; i < imgData.data.length; i += 4) {
      var rgblist = [imgData.data[i], imgData.data[i+1], imgData.data[i+2]]
      var filtered = toGray(rgblist)
      imgData.data[i] = filtered[0]
      imgData.data[i+1] = filtered[1]
      imgData.data[i+2] = filtered[2]
    }
    ctx.putImageData(imgData, 0, 0);
  }
}

canvas {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100vw;
  height: 100vh;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>filter</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <canvas id="canvas1"></canvas>
    <script src="codes.js"></script>
    <script src="filter.js"></script>
    <script src="script.js"></script>
  </body>
</html>

Answer 1

只需找到 rgb 值的平均值，然后将其作为红色、绿色和蓝色值插入以创建灰色。

您的新 toGray 函数将是：

function toGray(vals) {
  var r = vals[0]
  var g = vals[1]
  var b = vals[2]
  return (r+g+b)/3
}

Answer 2

基本上有3种颜色转灰度的算法。

明度、平均值、光度法

亮度法平均最突出和最不突出的颜色：

(max(R, G, B) + min(R, G, B)) / 2
平均法只是对值进行平均：(R + G + B) / 3
光度法是平均法的更复杂版本。它还对值进行平均，但它形成加权平均值以说明人类感知。与其他颜色相比，我们对绿色更敏感，因此绿色的权重最大。光度的公式是 0.21 R + 0.72 G + 0.07 B

根据上面的计算公式，函数为：

function toGray(vals) {
  var r = vals[0];
  var g = vals[1];
  var b = vals[2];
  return Math.round((Math.min(r, g, b) + Math.max(r, g, b)) / 2);
  // return Math.round((r + g + b) / 3);
  // return Math.round(0.21 * r + 0.72 * g + 0.07 * b);
}

您的过滤器函数将如下所示：

function filter() {
  .....
      var filtered = toGray(rgblist)
      imgData.data[i] = filtered
      imgData.data[i+1] = filtered
      imgData.data[i+2] = filtered
    
  ....
}

使用 RGB 值获取颜色的灰色阴影

Get gray shade of color with RGB values

html

javascript

css

rgb