javascript - 想要创建一个简单的图像亮度控制 slider

Question

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

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

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

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

    }
};

Live Demo