在 javascript 中给定 rgba 值的色调偏移？

Question

我正在尝试使用 canvas 绘制带有彩色滤镜的图像。由于 css 具有色调偏移滤镜，我将其用于 canvas。问题是我有一个调色板，我想通过用户在调色板上按下的颜色来改变颜色。我已经通过单击调色板获得了 RGBA 值 - 我只是不确定如何使用它为图像本身创建滤色器。

function changeColor2(e) {
    x2 = e.offsetX;
    y2 = e.offsetY;
    var imageData2 = firstContext2.getImageData(x2, y2, 1, 1).data;
    rgbaColor2 = 'rgba(' + imageData2[0] + ',' + imageData2[1] + ',' + imageData2[2] + ',1)';
    colorLabel2.style.backgroundColor = rgbaColor2;
    console.log(rgbaColor2);
    context.filter= 'grayscale(100%)' + 'sepia(100%)';
    //context.strokeStyle = 'rgba(' + imageData[0] + ',' + imageData[1] + ',' + imageData[2] + ',1)';
}

从这里我应该去哪里获得颜色偏移？

Answer 1

也许 "hue" 混合模式适合您：

您在要应用颜色偏移的位置绘制图像。
您将上下文的 globalCompositeOperation 设置为 "hue"。
您在整个图像上填充一个目标颜色的矩形。

const inp = document.querySelector("input");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = "https://picsum.photos/300/300";
img.decode().then(() => {

  canvas.width = img.width;
  canvas.height = img.height;

  inp.oninput = e => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = "hue";
    ctx.fillStyle = inp.value;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = "source-over";
  };
  inp.oninput();

});

<input type=color value=#cca633><br>
<canvas></canvas>

在 javascript 中给定 rgba 值的色调偏移？

hue-shift given rgba value in javascript?

javascript

canvas