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的情况下），则显示白色。 “线性道奇”产生相同的视觉效果。由于它总是产生与输入相同或更浅的颜色，因此它也被称为“加亮”。变量从所有结束值中减去1，值低于0变为黑色;这种模式被称为“加深”。

减去

此混合模式只是将一个图层的像素值减去另一个图层。如果是负值，则显示黑色。

所以如果你有黑色边框和红色区域：

红色子区域的第一次传递将红色变为黑色，黑色变为黑色（全为零）。第二次传递将黑色（全部）转换为绿色，将FF添加到黑色像素的绿色通道。

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

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

1 个答案: