基于javascript的画布图像亮度处理

我想更改图像的亮度。我有一个大项目，下面是一个最小的可复制的例子

我添加了这一行来检测对象中的ID，并为图像属性指定亮度

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

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

我正在使用HTMLCanvas，并希望使用纯javascript实现这一点

谢谢你的帮助，完整的代码可以在下面找到

var canvas=document.querySelector（'canvas'）；
var c=canvas.getContext（'2d'）；
var循环=[]；
//初始启动
设圆=新圆（）；
var image=新图像（）；
image.src=”https://assets.coingecko.com/coins/images/3412/large/ravencoin.png?1548386057";
var id=“id”；
//Brigger图像的图像覆盖
var imageOverlay=[“id”]；
对于（设j=0；j{
此[键]=选项[键]；
})
}
}
//绘制/设置图像动画
函数animate（）{
请求动画帧（动画）；
圆[0]。绘制（）；
}

---

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

您需要做的是将亮度过滤器应用于上下文。
在您呼叫之前：

this.c.drawImage（this.image

您只需设置过滤器：

this.c.filter=“亮度（200%）”；

下面是一个动画示例

var canvas=document.querySelector（'canvas'）；
var c=canvas.getContext（'2d'）；
var image=document.querySelector（'img'）；
亮度=0
函数animate（）{
请求动画帧（动画）；
b=数学正弦（明亮/60）*100+100
c、 filter=“亮度（“+b+”%）”；
c、 drawImage（图像，0,0,100,100）；
b+=100
c、 filter=“亮度（“+b+”%）”；
c、 drawImage（图像，50,0,100,100）；
b+=100
c、 filter=“亮度（“+b+”%）”；
c、 drawImage（图像，100，0，100，100）；
明亮的++
}
动画（）；

Hi Helder，谢谢你的回答。我有数百张来自外部来源的图片。这只是为了演示一个可复制的演示。由于这个原因，我不能使用标签。你知道过滤图片或更改原始图片的其他方法吗？谢谢，我想听听你的回复。@AttackTheWar我稍微更改了我的答案添加更多DescriptionTank@helder！我已经更新了代码并将循环放置在this.draw函数中。它正确地更新了图像！现在每次绘制图像时，都会应用过滤器。是否有其他方法可以更有效地执行此操作？在绘制之前应用过滤器？@AttackTheWar我不确定该循环是什么在那里做…您只需在

this.c.drawImage…

之前调用

this.c.filter…

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