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

Question

我试着用画布画一幅带有彩色滤镜的图像。由于css有色移过滤器，我使用它在画布上应用。问题是，我有一个调色板，我想通过用户在调色板上按下的颜色来改变颜色。我已经从点击调色板中获得了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"混合模式可以满足您的需要：

在要应用颜色偏移的地方绘制图像。"hue".

• You

• 将上下文的globalCompositeOperation设置为

，在整个图像上填充目标颜色的矩形。

​

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>

​