我想实现一个滑块控件来改变图像的亮度，就像在这个链接上显示但通过Html5画布一样：
我想通过使用html上的输入滑块来控制图像的亮度，并在javascript上定义。
任何想法如何使用javascript更改此图像的亮度。
// Dispatch a change event to file input element.
$(document).ready(function() {
$('#imgfile').change(function(e) {
var file = e.target.files[0],
imageType = /image.*/;
if (!file.type.match(imageType))
return;
// Get the uploaded file from the event handler and get a data URL by using the FileReader object.
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
});
// Use some jQuery to trigger click on canvas to input
$('#canvas').on('click', function() {
$('#imgfile').trigger('click');
//show the slider after click to choose the image
$('#slider').show();
});
// Make an img element with the data URL and draw it on the canvas.
function fileOnload(e) {
//Like this in javascript make an image
// img = new Image();
//img.onload = imageLoaded;
var $img = $('<img>', { src: e.target.result });
$img.load(function() {
var canvas = $('#canvas')[0];
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0, canvas.width, canvas.height );
});
}
var slider = $('#slider').change(function(){
console.log(this.value);
})
});body {
text-align: center;
width: 100%;
}
canvas {
border: 1px solid black;
margin: 50px auto;
}
.container {
margin: 0 auto;
}
@media(max-width:1200px) {
.container {
margin: 0 50px;
}
#canvas {
width: 100%;
height: auto;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
<script src="js/jquery.js" charset="utf-8"></script>
<script src="js/main.js" charset="utf-8"></script>
<title>Brightness-Adjustment</title>
</head>
<body>
<div class="container">
<canvas id="canvas" width="600" height="384">
<!-- <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" width="150" height="150" alt=""/> -->
</canvas>
<form action='#' onsubmit="return false;">
<input type='file' id='imgfile' style="display: none;"/>
<input id="slider" type="range" min="-1" max="1" step="0.05" value="0" style="display: none;">
</form>
</div>
</body>
</html>
答案 0 :(得分：4)
该演示非常古老，缓慢且完全过时。目前，有多种方法可以实现实时图像过滤器，不限于同一域和CORS安全图像。
有关画布的所有信息，请访问MDN CanvasRenderingContext2D
ctx.filter属性简单的解决方案是使用canvas过滤器属性，只需将亮度设置为您想要的值。绘制图像。
ctx.filter = "brightness(150%)";
ctx.drawImage(image,0,0);
如下例所示。
（请注意，SVG亮度与亮度滤镜不同，但这就是它们对亮度的解释）
const imageUrl = "http://camanjs.com/images/example1_600.jpg";
const ctx = canvas.getContext("2d");
ctx.fillText("Please wait loading image..",20,20);
const image = new Image;
image.src = imageUrl;
image.onload = () => {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
slider.addEventListener("mousemove", () => {
if (slider.value !== slideOldVal) {
setBrightness(Number(slider.value));
}
val.textContent = slider.value;
slideOldVal = Number(slider.value);
});
}
function setBrightness(value) {
ctx.filter = `brightness(${value + 100}%)`;
ctx.drawImage(image, 0, 0);
}
var slideOldVal;canvas {
border: 2px solid black;
}Brightness<input id="slider" type="range" min="-100" max="400" value="0" step="1"></input><span id="val"></span><br>
<canvas id="canvas"></canvas>
ctx.globalCompositeOperation属性稍微复杂但有更多支持（好吧IE11在2014年停滞不前，只要我们迎合懒惰的客户，我们都被困在2014年）
为了增亮使用复合操作＆＃34;减轻＆＃34;并在图像上绘制一个光填充以设置亮度。效果可以降低对比度，所以我喜欢通过使用减轻滤镜在顶部绘制图像来提高图像对比度。
ctx.drawImage(image,0,0);
ctx.globalCompositeOperation = "lighten";
ctx.drawImage(image,0,0); // draw image to bump up the contrast
ctx.globalAlpha = amount; // 0-1
ctx.fillStyle = "white
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
为了降低亮度，使用comp模式＆＃34;乘以＆＃34;然后使用alpha在图像上画一个黑色来控制数量。
示例显示了如何。
const imageUrl = "http://camanjs.com/images/example1_600.jpg";
const ctx = canvas.getContext("2d");
ctx.fillText("Please wait loading image..",20,20);
const image = new Image;
image.src = imageUrl;
image.onload = () => {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
slider.addEventListener("mousemove", () => {
if (slider.value !== slideOldVal) {
setBrightness(Number(slider.value));
}
val.textContent = slider.value;
slideOldVal = Number(slider.value);
});
}
ctx.drawImage(image, 0, 0);
ctx.globalCompositeOperation = "lighten";
ctx.fillStyle = "white";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
function setBrightness(value) {
ctx.drawImage(image, 0, 0);
ctx.save();
if (value < 0) {
ctx.globalCompositeOperation = "multiply";
ctx.fillStyle = "black";
ctx.globalAlpha = -value / 100;
ctx.fillRect(0, 0, canvas.width, canvas.height);
} else if (value > 0) {
ctx.fillStyle = "white";
ctx.globalCompositeOperation = "lighten";
ctx.globalAlpha = 1;
ctx.drawImage(image, 0, 0);
ctx.globalAlpha = value / 100;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
ctx.restore();
}
var slideOldVal;canvas {
border: 2px solid black;
}Brightness<input id="slider" type="range" min="-100" max="100" value="0" step="1"></input><span id="val"></span><br>
<canvas id="canvas"></canvas>
注意示例中使用的图像来自OP的链接，仅供比较