想要創建一個簡單的圖像亮度控制滑塊

Question

我想實現一個滑塊控件來改變圖像的亮度，就像這個鏈接中顯示的那樣：

我對javascript相當陌生，事實證明這相當困難。 所以現在，我正在使用 CamanJS 庫，但不幸的是無法復制它。 我嘗試對示例進行逆向工程，但是該示例非常復雜，根本不可讀！ 無論如何，這是我的實現的問題：

//this is the event handler called when the slider value changes
function brightnessControl(e, ui) {
  //mainImage is the id of the canvas that holds the image
  Caman("#mainImage", function() {
    this.brightness(ui.value);
    this.render();
  });
}

原始圖像被具有亮度設置的新圖像覆蓋。 所以最終，我最終得到的只是一個純白色或黑色的圖像。 任何幫助將不勝感激！ 提前致謝！

Answer 1

您可以使用canvas元素、CSS3 過濾器和純 JavaScript 來實現所需的效果：

HTML

<input id="bri" type="text" value="1"/>
<canvas id="img"></canvas>

JavaScript

window.onload = function () {
    var context = document.getElementById('img').getContext('2d');

    /* Loading the image at first */
    var base_image = new Image();
    base_image.src = 'http://images.google.com/intl/fr_ALL/images/logos/images_logo_lg.gif';
    context.drawImage(base_image, 0, 0);

    /* Function trigerred when we leave the input */
    document.getElementById('bri').onblur = function () {
        var amount = this.value;

        var img = document.getElementById('img');

        /* We change the brightness of the canvas itself */
        img.setAttribute('style', 'filter:brightness(' + amount + '); -webkit-filter:brightness(' + amount + '); -moz-filter:brightness(' + amount + ')');

    }
};

現場演示

Answer 2

要閱讀完整實施，請查看此網站如何創建圖像亮度控制滑塊

 rangeInput = document.getElementById('range'); container = document.getElementsByClassName('container')[0]; rangeInput.addEventListener("mousemove",function(){ container.style.filter = "brightness(" + rangeInput.value + "%)"; });

 *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ background: url(https://codingdebugging.com/wp-content/uploads/2020/07/include-how-to-create-an-image-brightness-control-slider.jpg) no-repeat center; min-height: 100vh; background-size: cover; display: flex; align-items: center; justify-content: center; } .brightness-box{ width: 400px; height: 60px; background: #f9f9f9; border-radius: 8px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; } .brightness-box i{ margin: 0 10px; } #range{ width: 100%; -webkit-appearance: none; background: #0a85ff; height: 3px; outline: none; } #range::-webkit-slider-thumb{ -webkit-appearance: none; width: 22px; height: 22px; background: #333; border-radius: 50%; cursor: pointer; }

 <!DOCTYPE html> <html> <head> <title>Brightness Control - Coding Debugging</title> <!-- Font Awesome Icon --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"> </head> <body> <div class="container"> <div class="brightness-box"> <i class="far fa-sun"></i> <input type="range" id="range" min="10" max="100" value="100"> <i class="fas fa-sun"></i> </div> </div> </body> </html>

Answer 3

//this is the event handler called when the slider value changes
function brightnessControl(e, ui) {
  //mainImage is the id of the canvas that holds the image
  Caman("#mainImage", function() {
    this.style.filter='brightness(ui.value)';//like this: filter: brightness(0.4)
    //this.brightness(ui.value);
   // this.render(); i don/t know this is useful? you judge it by yourself
  });
}

亮度從 0 到 1。

Answer 4

以下將在 CSS 2.1+ 中工作。 請注意，我在本示例中使用 HTML5 input type="range"只是為了便於使用。 本示例中還為不支持此功能的瀏覽器實現了 Javascript 回退代碼（ input type將默認為text ）。

最好是實現自定義滑塊，但我相信這個問題是關於亮度控制的，而不是關於滑塊的。

其工作方式是根據滑塊/文本輸入值將圖像與一些等比例的元素和不透明度重疊。 此元素的背景顏色對於值 > 50 為白色，對於值 < 50 為黑色。

鏈接到 JS Fiddle

#HTML
<div id="container">
    <div id="brightness"></div>
    <img src="http://placehold.it/400x400" />
</div>

Brightness (0 - 100):<br />
<input type="range" id="controls" value="50" min="0" max="100" maxlength="3">

#Javascript
window.onload = function()
{
    var brightness = document.getElementById('brightness');
        controls   = document.getElementById('controls');

    controls.onkeyup = controls.onchange = function()
    {
        var brightness = document.getElementById('brightness'),
            val        = parseInt(this.value) - 50;

        if (val > 50 || val < -50)
        return false;

        brightness.style.backgroundColor = val > 0 ? 'white' : 'black';
        brightness.style.opacity = Math.abs(val/100) * 2;
    }
}

#CSS
#container{
    width:400px;
    height:400px;
    margin-bottom:10px;
    border:1px solid rgb(127, 127, 127);
}

#brightness{
    width:400px;
    height:400px;
    background:white;
    position:absolute;
    opacity:0;
}

#controls{
    width:400px;
    height:22px;
    padding:0 5px;
}

想要創建一個簡單的圖像亮度控制滑塊

問題描述

4 個解決方案

解決方案1
1 2013-07-19 20:27:04

HTML

JavaScript

現場演示

解決方案2
1 2020-07-04 03:43:24

解決方案3
0 2020-05-16 06:17:08

解決方案4
-1 2013-07-19 21:18:14

想要創建一個簡單的圖像亮度控制滑塊

問題描述

4 個解決方案

解決方案1 1 2013-07-19 20:27:04

HTML

JavaScript

現場演示

解決方案2 1 2020-07-04 03:43:24

解決方案3 0 2020-05-16 06:17:08

解決方案4 -1 2013-07-19 21:18:14

解決方案1
1 2013-07-19 20:27:04

解決方案2
1 2020-07-04 03:43:24

解決方案3
0 2020-05-16 06:17:08

解決方案4
-1 2013-07-19 21:18:14