4

我想实现一个滑块控件来改变图像的亮度，就像这个链接中显示的那样：

http://camanjs.com/examples/

我对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();
  });
}

原始图像被具有亮度设置的新图像覆盖。所以最终，我得到的只是一张纯白色或黑色的图像。任何帮助将不胜感激！提前致谢！

4

4 回答 4

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 + ')');

    }
};

现场演示

于 2013-07-19T20:27:04.687 回答
1

要阅读完整的实现，请查看本网站How to Create an Image Brightness Control Slider

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>

于 2020-07-04T03:43:24.033 回答
0 
//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。

于 2020-05-16T06:17:08.587 回答
-1

以下内容适用于 CSS 2.1+。请注意，我input type="range"在本示例中使用 HTML5 只是为了便于使用。本示例中还为不支持此功能的浏览器实现了 Javascript 后备代码（input type默认为text）。

最好使用自定义滑块，但我相信这个问题是关于亮度控制的，而不是关于滑块的。

它的工作方式是将图像与一些相等比例的元素重叠，并且不透明度取决于滑块/文本输入值。如果值 > 50，此元素的背景颜色将为白色，而值 < 50 则为黑色。

链接到 JS 小提琴

#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;
}
于 2013-07-19T21:18:14.403 回答