javascript - 将 HTML Canvas 中的像素颜色处理为另一种颜色但具有相同的阴影

Question

我有一个功能，允许我在暂时不可见的 Canvas 上绘制图像来操纵颜色并将所有非纯黑色的内容更改为特定颜色，但保留原始的白色“阴影”。

但是，当尝试执行该操作时，颜色比应有的颜色暗得多。

我已经编写了用新颜色减去旧颜色(已减去 255)来替换颜色的函数。

    for(var i = 0; i < imageData.data.length; i+=4) {
      if((imageData.data[i] != 0 &&
          imageData.data[i + 1] != 0 &&
          imageData.data[i + 2] != 0)) {

        imageData.data[i] = newColor.r - (255 - imageData.data[i]);
        imageData.data[i + 1] = newColor.g - (255 - imageData.data[i + 1]);
        imageData.data[i + 2] = newColor.b - (255 - imageData.data[i + 2]);

        if(imageData.data[i] > 255)
          imageData.data[i] = 255;

        if(imageData.data[i + 1] > 255)
          imageData.data[i + 1] = 255;

        if(imageData.data[i + 2] > 255)
          imageData.data[i + 2] = 255;
      }
    }

鉴于新颜色为 #44698B (r:68, g: 105, b:139)，稍微灰一点的白色 #999 (153, 153, 153) 部分的结果为 #000325 (0, 3, 36) 而它应该是 #2F4860 (47, 72, 96)。

Answer 1

在保留阴影的同时转换 RGB 值很困难。我建议切换到 HSL。这是有关该主题的链接:https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/