使用html5/CSS/JS的图像亮度

Image brightness with html5/CSS/JS

本文关键字：图像 亮度 CSS html5 使用 JS      更新时间：2023-09-26

在我的项目中，我试图创造一种环境照明的感觉。我通过客户端编码处理图像，我需要调整几个图像的亮度。我知道有像Pixastic这样的库，但我想要一个直接应用于HTML代码（如标签）而不是JS中的Image对象的解决方案。有没有基于Javascript或CSS的方法可以做到这一点？

您可以尝试使用CSS不透明度，看看它是否适合您的需求。

img {
    opacity: 0.8; /* good browsers */
    filter: alpha(opacity=80); /* ye 'old IE */
}

正如Blender所建议的，<canvas>标记是您想要的gamma操作，这是一种非线性的每像素变换。

首先，如果Pixastic可以处理new Image的结果，那么它也可以处理文档中的<img>元素。

除此之外，您的选项基本上是画布图像数据操作（在IE8或更早版本中不起作用）和SVG过滤器（在IE7或更早版本中将不起作用，并且除了Gecko之外，不会直接处理HTML元素）。

这里有一个HTML5。

勾选一个进行亮度调整。

https://www.html5rocks.com/en/tutorials/canvas/imagefilters/

Filters.brightness = function(pixels, adjustment) {
  var d = pixels.data;
  for (var i=0; i<d.length; i+=4) {
    d[i] += adjustment;
    d[i+1] += adjustment;
    d[i+2] += adjustment;
  }
  return pixels;
};
相关文章：