如何在HTML5 Canvas中调整图像的色彩，饱和度和亮度？

Question

最简单的方法是可取的。遗憾的是，我对图像处理知之甚少！

Answer 1

您可以使用globalCompositeOperation，"hue"，"saturation"，"color"和"luminosity"

哪里

• ＆＃34;色调＆＃34;将目的地色调更改为色调到源的色调。
• ＆＃34;饱和＆＃34;将目的地饱和度更改为源
• ＆＃34;颜色＆＃34;将目标颜色更改为源颜色。
• ＆＃34;亮度＆＃34;将目标亮度更改为源
的亮度

例如，如果要将图像饱和度更改为完全饱和度

ctx.drawImage(image,0,0); // image to change
ctx.globalCompositeOperation = "saturation";
ctx.fillStyle = "hsl(0,100%,50%)";  // saturation at 100%
ctx.fillRect(0,0,image.width,image.height);  // apply the comp filter
ctx.globalCompositeOperation = "source-over";  // restore default comp

如果你想要更精细的控制，你必须使用getImageData和setimagedata逐个像素地进行控制，但这可能会非常慢。对于速度，你最好使用一个webGL过滤器，它将在速度方面与上述comp模式进行比较，但权衡是代码复杂性。