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

最简单的方法是可取的。不幸的是，我对图像处理了解不多！

最佳答案

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

哪里


“色相”会将目标色相更改为源色相。
“饱和度”会将目标饱和度更改为源饱和度
“颜色”会将目标颜色更改为源颜色。
“发光度”会将目标发光度更改为源发光度


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

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模式进行比较，但要权衡的是代码复杂度。

关于javascript - 如何在HTML5 Canvas中调整图像的色相，饱和度和亮度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40353049/