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

Question

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

Answer 1

您可以尝试使用CSS不透明度来查看是否符合您的需求。

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

Answer 2

正如Blender建议的那样，<canvas>标签是您想要的伽马操作，这是一种非线性的每像素转换。

Answer 3

这是一个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;
};

Answer 4

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

除此以外的其他选项基本上是画布图像数据操作（在IE8或更旧版本中不起作用）和SVG过滤器（在IE8或更旧版本中不起作用，并且不能直接在HTML元素上工作，除了壁虎）。