使用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的圖像亮度

回答

相關問題