Want to create a simple image brightness control slider

后端未结

关注

 4  602

轻奢々

I wanted to implement a slider control that changes the brightness of the image, much like the one shown at this link :

http://camanjs.com/examples/

I am fa

相关标签:

4条回答

孤城傲影

2021-01-06 10:06

//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
  });
}

the brightness is from 0 to 1.

0 讨论(0)

既然无缘

2021-01-06 10:10

To read full implementation check this website 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>

0 讨论(0)

野趣味

2021-01-06 10:13

You can achieve the desired effect with a canvas element, CSS3 filter and pure 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 + ')');

    }
};

Live Demo

0 讨论(0)

一向

2021-01-06 10:14

The following will work in CSS 2.1+. Please note that I have used HTML5 input type="range" only for ease of use in this example. Javascript fallback code is also implemented in this example for browsers that do not support this (input type will default to text).

Optimally a custom slider would be implemented, but I believe this question is about brightness control and not so much about the slider.

The way this works is by overlapping the image with some element of equal proportions and with opacity depending on the slider/text input value. The background color of this element will be white for values > 50, and black for values < 50.

Link to 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;
}

0 讨论(0)