gpt4 book ai didi

javascript - 使用 JavaScript 在 Canvas 中操作图像亮度

转载 作者:行者123 更新时间:2023-11-28 03:10:42 29 4
gpt4 key购买 nike

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

我添加了这一行来检测对象中的 ID 并将亮度分配给图像属性。

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

当控制台记录它显示的图像时:

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

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

我正在使用 html canvas,并希望使用纯 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>

最佳答案

是的,您可以使用样式更改图像的亮度,但这不会改变原始图像,原始图像是 Canvas 用来绘制的内容。

您需要做的是将亮度滤镜应用于上下文。
在调用之前:
this.c.drawImage(this.image
您只需设置过滤器:
this.c.filter = "亮度(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%);">

关于javascript - 使用 JavaScript 在 Canvas 中操作图像亮度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60155135/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com