Konvajs 灰度关闭

问题描述

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

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

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

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

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

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

image.filters([]);

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

解决方法

删除 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 等变量。