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

Question

I want to change to brightness of the image.我想改变图像的亮度。 I have a big project and below is a minimal reproducible example.我有一个大项目，下面是一个最小的可重复示例。

I have added this line to detect an ID in a object and assign a brightness to the image property.我添加了这一行来检测对象中的 ID 并为图像属性分配亮度。

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

When console logging the image it displays:当控制台记录image它显示：

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

I have no clue why the brightness is not displayed on the image.我不知道为什么图像上没有显示亮度。

I'm using html canvas and would like to do this with plain javascript.我正在使用 html canvas 并希望使用纯 javascript 来完成此操作。

Thanks for helping me, the full code can be found below.感谢您帮助我，完整代码可以在下面找到。

 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>

Answer 1

Yes you can change the brightness of an image with the style, but that does not change the original, and the original is what the canvas uses to draw.是的，您可以使用样式更改图像的亮度，但这不会改变原始图像，而原始图像是画布用来绘制的。

What you need to do is apply that brightness filter to the context.您需要做的是将该亮度过滤器应用于上下文。
Before you call the:在您致电之前：
this.c.drawImage(this.image
you just set the filter:您只需设置过滤器：
this.c.filter = "brightness(200%)";

Below is an animated example下面是一个动画示例

 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 在画布中操作图像亮度

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-02-10 19:57:30

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-02-10 19:57:30

解决方案1
0 已采纳 2020-02-10 19:57:30