用JavaScript实现CSS中的色相/饱和度/明度调节功能

前端

2023-12-04 19:06:50

前言

在图形设计和前端开发中，色相/饱和度/明度（HSB）是一个重要的颜色模型。HSB模型将颜色表示为三个独立的属性：色相、饱和度和明度。

色相：颜色在色轮上的位置，以角度表示。
饱和度：颜色的纯度，即颜色的浓度。
明度：颜色的亮度，即颜色的深浅。

实现原理

色相/饱和度/明度调节功能的实现原理是通过调整图像中像素的颜色值来改变图像的颜色。具体步骤如下：

获取图像的像素数据。
遍历每个像素，并计算其色相、饱和度和明度值。
根据给定的色相、饱和度和明度值，计算出新的像素颜色值。
将新的像素颜色值写入图像。

代码实现

function adjustHSB(image, hue, saturation, brightness) {
  // 获取图像的像素数据
  var pixels = image.getContext("2d").getImageData(0, 0, image.width, image.height).data;

  // 遍历每个像素，并计算其色相、饱和度和明度值
  for (var i = 0; i < pixels.length; i += 4) {
    var r = pixels[i];
    var g = pixels[i + 1];
    var b = pixels[i + 2];
    var a = pixels[i + 3];

    var hsv = RGBtoHSV(r, g, b);

    // 根据给定的色相、饱和度和明度值，计算出新的像素颜色值
    hsv[0] += hue;
    hsv[1] *= saturation;
    hsv[2] *= brightness;

    var rgb = HSVtoRGB(hsv[0], hsv[1], hsv[2]);

    // 将新的像素颜色值写入图像
    pixels[i] = rgb[0];
    pixels[i + 1] = rgb[1];
    pixels[i + 2] = rgb[2];
    pixels[i + 3] = a;
  }

  // 将新的像素数据写入图像
  image.getContext("2d").putImageData(pixels, 0, 0, image.width, image.height);
}

function RGBtoHSV(r, g, b) {
  var max = Math.max(r, g, b), min = Math.min(r, g, b);
  var h, s, v = max;

  var d = max - min;
  if (max == 0) {
    s = 0;
  } else {
    s = d / max;
  }

  if (max == min) {
    h = 0;
  } else {
    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
    }

    h /= 6;
  }

  return [h, s, v];
}

function HSVtoRGB(h, s, v) {
  var r, g, b;

  var i = Math.floor(h * 6);
  var f = h * 6 - i;
  var p = v * (1 - s);
  var q = v * (1 - f * s);
  var t = v * (1 - (1 - f) * s);

  switch (i % 6) {
    case 0:
      r = v;
      g = t;
      b = p;
      break;
    case 1:
      r = q;
      g = v;
      b = p;
      break;
    case 2:
      r = p;
      g = v;
      b = t;
      break;
    case 3:
      r = p;
      g = q;
      b = v;
      break;
    case 4:
      r = t;
      g = p;
      b = v;
      break;
    case 5:
      r = v;
      g = p;
      b = q;
      break;
  }

  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

使用方法

您可以将上述代码嵌入到您的前端项目中，并通过调整hue、saturation和brightness参数来实现图像的颜色调节功能。

例如，以下代码将创建一个简单的图像编辑器，允许用户调整图像的色相、饱和度和明度：

<input type="range" id="hue" min="-180" max="180" value="0">
<input type="range" id="saturation" min="0" max="1" value="1">
<input type="range" id="brightness" min="0" max="1" value="1">
<canvas id="image"></canvas>

<script>
  var image = document.getElementById("image");
  var hue = document.getElementById("hue");
  var saturation = document.getElementById("saturation");
  var brightness = document.getElementById("brightness");

  image.onload = function() {
    adjustHSB(image, hue.value, saturation.value, brightness.value);
  };

  hue.onchange = function() {
    adjustHSB(image, hue.value, saturation.value, brightness.value);
  };

  saturation.onchange = function() {
    adjustHSB(image, hue.value, saturation.value, brightness.value);
  };

  brightness.onchange = function() {
    adjustHSB(image, hue.value, saturation.value, brightness.value);
  };

  var imageURL = "path/to/image.jpg";
  image.src = imageURL;
</script>