我如何在HTML5 Canvas中调整图像的房屋，饱和度和亮度

How can I adjust the huse, saturation, and lightness of in image in HTML5 Canvas?

本文关键字：饱和度 亮度 图像 调整 HTML5 Canvas      更新时间：2023-09-26

最好使用最简单的方法。不幸的是，我对图像处理知之甚少!

可以使用globalCompositeOperation、"hue"、"saturation"、"color"、"luminosity"

,

  • "hue"将把目标色调改为源色调。
  • "饱和度"将改变目标饱和度为源
  • "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过滤器，它将在速度方面与上述的比较模式进行比较，但代价是代码的复杂性。

相关文章：