Konvajs 灰度关闭答案

【问题标题】：Konvajs Grayscale turn offKonvajs 灰度关闭
【发布时间】：2021-02-10 12:12:50
【问题描述】：

我正在使用 Konvajs 滤镜让用户能够更改图像的亮度、对比度和灰度。根据 KonvaJs 示例，我使用的输入滑块效果很好。对于我使用的亮度和对比度：

image.filters([Konva.Filters.Brighten, Konva.Filters.Contrast]);

但对于灰度，我使用输入滑块作为开/关开关和以下过滤器：

image.filters([Konva.Filters.Grayscale]);

因此，当用户将灰度开关设置为“开”时，我可以调用灰度滤镜。但如果用户随后将灰度切换为“关闭”，则似乎无法取消此过滤器。

我有一个涉及取消所有过滤器的解决方法：

image.filters([]);

然后将亮度和对比度过滤器重新调用为先前设置的值。有没有办法简单地取消灰度滤镜？

【问题讨论】：

标签： filter grayscale konvajs

【解决方案1】：

删除Konva.Node 的过滤器的唯一方法是将其从filters 属性中删除。因此，如果您想重置过滤器或启用/禁用它们，您应该执行以下操作：

const filters = [];

if (needBrighten) {
  filters.push(Konva.Filters.Brighten);
}
if (needContrast) {
  filters.push(Konva.Filters.Contrast);
}
if (needGrayscale) {
  filters.push(Konva.Filters.Grayscale);
}
node.filters(filters);

您可能需要从输入中检测到 needBrighten 等变量。

【讨论】：