如何使用 Fabricjs 更改图像颜色？

Question

我正在尝试使用 Fabric.js 滤镜来更改图像的单一颜色。例如，我正在尝试将图像的红色部分更改为绿色：

image.filters.push(new fabric.Image.filters.Blend({
    color: '#ff0000',
    mode: 'subtract'
}));
image.filters.push(new fabric.Image.filters.Blend({
    color: '#00ff00',
    mode: 'add'
}));
image.applyFilters(_canvas.renderAll.bind(_canvas));

但现在的情况是黑色边框也全部变为绿色。有什么方法可以使用内置过滤器来做到这一点吗？

Answer 1

混合滤镜不用于颜色替换。

加法

这种混合模式只是将一层的像素值与另一层的像素值相加。如果值大于 1（在 RGB 的情况下），则显示白色。 "Linear Dodge" 产生相同的视觉效果。由于这总是产生与输入相同或更浅的颜色，因此也称为 'plus lighter'。变体从所有最终值中减去 1，低于 0 的值变为黑色；这种模式被称为 'plus darker'.

减去

这种混合模式只是将一层的像素值与另一层相减。如果为负值，则显示黑色。

因此，如果您有黑色边框和红色区域：

红色减法的第一遍将红色转换为黑色，将黑色转换为黑色（全为零）。第二遍将黑色（全部）转换为绿色，将 FF 添加到黑色像素的绿色通道。

要更改图像的颜色，您应该创建一个自定义过滤器，每个像素检测红色并在其上写上绿色。

如何使用 Fabricjs 更改图像颜色？

How do I use Fabricjs to change image color?

image-processing

fabricjs