javascript 想要创建一个简单的图像亮度控制滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17754604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Want to create a simple image brightness control slider
提问by Rajiv Nair
I wanted to implement a slider control that changes the brightness of the image, much like the one shown at this link :
我想实现一个滑块控件来改变图像的亮度，就像这个链接中显示的那样：
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 :
我对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();
});
}
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!
原始图像被具有亮度设置的新图像覆盖。所以最终，我只得到一个纯白色或黑色的图像。任何帮助将不胜感激！提前致谢！
回答by Jeff Noel
You can achieve the desired effect with a canvaselement, CSS3 filter and pure JavaScript:
你可以用一个canvas元素、CSS3 过滤器和纯 JavaScript来达到你想要的效果：
HTML
HTML
<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 + ')');
}
};
Live Demo
现场演示
回答by defend orca
//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 到 1。
回答by Mark
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 typewill default to text).
以下将在 CSS 2.1+ 中工作。请注意，我input type="range"在本示例中使用 HTML5只是为了便于使用。本示例中还为不支持此功能的浏览器实现了 Javascript 后备代码（input type默认为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.
其工作方式是根据滑块/文本输入值将图像与一些等比例的元素和不透明度重叠。此元素的背景颜色对于值 > 50 为白色，对于值 < 50 为黑色。
#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;
}
