javascript - 如何在 HTML5 Canvas 中调整图像的色调、饱和度和亮度？

Question

尽可能简单的方法是可取的。不幸的是，我对图像处理知之甚少!

Answer 1

您可以使用 globalCompositeOperation 、"hue"、"saturation"、"color" 和“亮度”

在哪里

• “色调”会将目标色调更改为源色调。
• “饱和度”会将目标饱和度更改为源的饱和度
• “颜色”会将目标颜色更改为源颜色。
• “光度”会将目标光度更改为源光度

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

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 过滤器，它可以在速度方面与上述合成模式进行比较，但代价是代码复杂性。