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

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

来源

2011-05-27 Hgeg

您可以使用（IE不支持的）'

由于搅拌机所暗示的，<canvas>标签是你想要的伽玛操作，这是一个非线性的每个像素的转变。

来源

2011-05-27 04:56:20 ninjagecko

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

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

来源

2011-05-27 04:48:01 dtbarne

尽管我怀疑它看起来不错，但可以在图像后面放置白色背景，以便它变得透明，它看起来变得更白更白（“更亮”）。 – ninjagecko 2011-05-27 04:57:44

使用不透明度是我首先想到的。我试图在图像上放一个阴影层，但是它会使整个块变暗。我只是想让图像变暗。 – Hgeg 2011-05-27 04:58:20

然后在图像后面放置一个黑色图层。 – dtbarne 2011-05-27 05:01:50

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

来源

2011-05-27 05:44:43 Sreekumar

死链接....... – 2014-09-23 09:14:15

这是一个旧帖子，请使用本站做和测试html5 http://www.html5canvastutorials.com/ – Sreekumar 2014-09-24 10:18:51

死链接-1： – 2017-05-11 17:01:26

首先，如果Pixastic可以对new Image结果工作，它可以在文档中<img>元素工作了。

除此之外，您的选择基本上都是canvas图像数据操作（它不适用于IE8或更旧版本）和SVG过滤器（它不适用于IE8或更旧版本，并且不会直接在任何东西上对HTML元素起作用但是壁虎）。

来源

2011-05-27 05:58:15

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

回答

相关问题