使用 javascript 在画布中处理图像亮度答案

【问题标题】：Image brightness manipulation in canvas with javascript使用 javascript 在画布中处理图像亮度
【发布时间】：2020-05-26 01:13:16
【问题描述】：

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

我添加了这一行来检测对象中的 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>

【问题讨论】：

标签： javascript image image-processing canvas

【解决方案1】：

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

您需要做的是将该亮度过滤器应用于上下文。
致电前：
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%);">

【讨论】：

您好 Helder，谢谢您的回答。我有数百张来自外部来源的图像。这只是为了演示一个可重现的演示。由于这个原因，我不能使用标签。您知道另一种过滤图像或更改原始图片的方法吗？谢谢，我想收到你的回复。
@AttackTheWar 我改变了我的答案，添加了更多描述
感谢@helder！我已经更新了代码并将循环放在 this.draw 函数中。它会正确更新图像！现在每次绘制图像时都会应用过滤器。有没有另一种方法可以做到这一点，所以它更有效？ ex 在绘制之前应用过滤器？
@AttackTheWar 我不确定那个循环在那里做了什么......你只需要在this.c.drawImage...之前调用this.c.filter...