使用 javascript 在画布中进行图像亮度操作

我想更改为图像的亮度。我有一个大项目，下面是一个最小的可重现示例。

我添加了此行来检测对象中的 ID 并为图像属性分配亮度。

for (let j = 0; j < imageOverlay.length ; j++) {
if (id == imageOverlay[j]) {
image.style.filter = "brightness(200%)";
}
}

控制台记录image时，它会显示：

<img src="https://assets.coingecko…ravencoin.png?1548386057" style="filter: brightness(200%);">

我不知道为什么亮度没有显示在图像上。

我正在使用html画布，并希望使用纯JavaScript来执行此操作。

感谢您对我的帮助，完整的代码可以在下面找到。

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
var circles = [];
//Init Start
let circle = new Circle();
var image = new Image();
image.src = "https://assets.coingecko.com/coins/images/3412/large/ravencoin.png?1548386057";
var id = "id";
//Image overlay for brigther images
var imageOverlay = ["id"];
for (let j = 0; j < imageOverlay.length ; j++) {
//Check for id
if (id == imageOverlay[j]) {
console.log("FOUND ID: " + imageOverlay[j]);
//Change brightness
image.style.filter = "brightness(200%)";
console.log(image);
}
}
circle.init({
image, c, id,
});
circles.push(circle);
//draw image
animate();
function Circle() {
//Give var
this.diameter = 100;
this.id = id;
this.image = image;
this.c = null;
//Draw circle on canvas
this.draw = function () {
//Image overlay for brigther images
for (let j = 0; j < imageOverlay.length ; j++) {
if (this.id == imageOverlay[j]) {
this.c.filter = "brightness(300%)";
}
}
this.c.beginPath();
this.c.drawImage(this.image, (100 - this.diameter / 2), (100 - this.diameter / 2), this.diameter, this.diameter);
this.c.closePath();
};
//Init circle properties
this.init = function (options) {
Object.keys(options).forEach((key) => {
this[key] = options[key];
})
}
}
//Draw / Animate image
function animate() {
requestAnimationFrame(animate);
circles[0].draw();
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas></canvas>
</body>
</html>

是的，您可以使用样式更改图像的亮度，但这不会更改原始图像，并且原始图像是画布用来绘制的。

您需要做的是将该亮度滤镜应用于上下文。
在调用：
this.c.drawImage(this.image
之前，只需设置过滤器：
this.c.filter = "brightness(200%)";

下面是一个动画示例

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
var image = document.querySelector('img');
bright=0
function animate() {
requestAnimationFrame(animate);

b=Math.sin(bright/60)*100 + 100
c.filter = "brightness("+b+"%)";
c.drawImage(image, 0, 0, 100, 100);

b += 100
c.filter = "brightness("+b+"%)";
c.drawImage(image, 50, 0, 100, 100);

b += 100
c.filter = "brightness("+b+"%)";
c.drawImage(image, 100, 0, 100, 100);
bright++
}
animate();

<canvas height="100" width="200"></canvas>
<img src="https://assets.coingecko.com/coins/images/3412/large/ravencoin.png?1548386057" height="100" width="100" style="filter:brightness(90%);">

相关内容

最新更新

热门标签：