ChatGPT寫一個調整影像飽和度的網頁

之前調整影像亮度,對比度,清晰度都是在影像的RGB上直接運算, 這次要調整的飽和度存在於HSV色彩空間. HSV就是色相(Hue),飽和度(Saturation)和明度(Value). 所以把影像的每一個pixel的RGB都計算後轉成HSV, 再針對其中的S加減後, 飽和度就改變了. 最後把所有的HSV全部再轉回原來的RGB,顯示在螢幕上就可以看到調整的結果.

function adjustSaturation() {
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  
  const saturation = parseFloat(saturationInput.value); // [-100, 100]
  
  for (let i = 0; i < data.length; i += 4) {
      const hsv = rgbToHsv(data[i], data[i + 1], data[i + 2]);
      hsv[1] += saturation / 100; // 調整飽和度
      hsv[1] = Math.max(0, Math.min(1, hsv[1])); // 確保在 [0, 1] 範圍內
      const rgb = hsvToRgb(hsv[0], hsv[1], hsv[2]);
  
      data[i] = rgb[0];
      data[i + 1] = rgb[1];
      data[i + 2] = rgb[2];
  }
  
  ctx.putImageData(imageData, 0, 0);        
}

JavaScript

RGB轉HSV或HSV再轉回RGB的部分我不討論. 我知道ChatGPT自己會寫. 事實上它全部都會寫, 只是還是會犯錯誤. 所以有人說有了ChatGPT後, 不需要工程師的說法根本錯得離譜. 沒有工程師, ChatGPT的錯誰會知道呢? 又需要誰讓ChatGPT改正錯誤呢?

上面第九行 hsv[1] += saturation / 100; 是把輸入飽和度範圍的正負100, 調整成正負1以內後,再加入hsv[1], 顯然hsv[1] 可能會超出[0,1]而有了錯誤.所以第十行要加上一些範圍的限制.

寫好的網頁我放在 https://cardteck.com/wp/adjustSaturation.html.

要怎麼測試呢? 首先來了解什麼是飽和度. 在HSV空間中, 飽和度範圍介於[0,1]. 1代表最鮮豔,色彩度最高, 0代表毫無色彩, 什麼是毫無色彩? 就是全黑(R=G=B=0),全白(R=G=B=255),或介於其中的所有的灰(R=G=B). 所以任何一張影像,把飽和度調低, 就越接近黑白(帶有灰階)影像. 把飽和度調高, 黑白灰就越少, 色彩成分就越多, 就是一般人說的越鮮豔.

我用的原圖如下.