我想实现一个滑块控件来更改图像的亮度，很像此链接中显示的控件，但通过 HTML5 Canvas 实现：
我想通过使用 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>那个演示非常非常老，速度慢，而且完全过时了。如今，有多种方法可以实现实时图像过滤器，并且不限于同一域和 CORS 安全图像。
有关画布的所有信息，请访问 MDN CanvasRenderingContext2D
ctx.filter简单的解决方案是使用画布滤镜属性并将亮度设置为您想要的值。绘制图像。
ctx.filter = "brightness(150%)";
ctx.drawImage(image,0,0);
如下例所示。
（请注意，SVG 亮度与亮度滤镜不同，但这是他们对亮度含义的解释）
const imageUrl = "https://en.wikipedia.org/wiki/Carl_Friedrich_Gauss#/media/File:Carl_Friedrich_Gauss_1840_by_Jensen.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 年）
要提亮，请使用复合操作“变亮”并在图像上绘制浅色填充以设置亮度。该效果会降低对比度，因此我喜欢通过使用增亮滤镜在顶部绘制图像一次来提高图像对比度。
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);
要降低亮度，请使用补偿模式“乘法”，然后使用 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的链接，仅供比较