想要创建一个简单的图像亮度控制滑块 [英] Want to create a simple image brightness control slider

问题描述

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

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/

我对javascript很新这被证明是相当困难的。所以现在，我正在使用CamanJS库，但遗憾的是我无法复制它。我尝试了逆向工程的例子，但是这个例子很复杂，而且根本不可读！不管怎样，继承问我的实现问题：

I am fairly new to javascript and this is proving to be rather difficult. So right now, I am using the CamanJS library but unfortunately am not able to replicate that. I tried reverse engineering the example, but gosh the example is very complicated and not at all readable! Anyways, heres the problem with my implementation :

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

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

the original image is overwritten with a new image with the brightness settings. So eventually, I end up with just a plain white or black image. Any help would be greatly appreciated! Thanks in advance!

推荐答案

使用画布元素，CSS3过滤器和纯JavaScript：

You can achieve the desired effect with a canvas element, CSS3 filter and pure JavaScript:

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

JavaScript

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

    }
};

这篇关于想要创建一个简单的图像亮度控制滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！