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

【问题标题】：How do I use Fabricjs to change image color?如何使用 Fabricjs 更改图像颜色？
【发布时间】：2016-02-23 11:04:18
【问题描述】：

我正在尝试使用 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));

但是正在发生的事情是黑色边框也都变成了绿色。有没有办法使用内置过滤器做到这一点？

【问题讨论】：

标签： image-processing fabricjs

【解决方案1】：

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

加法

这种混合模式只是简单地将一层的像素值与另一层相加。如果值大于 1（在 RGB 的情况下），则显示白色。 “线性减淡”产生相同的视觉效果。由于这总是产生与输入相同或更浅的颜色，因此也称为“加亮”。变体从所有结束值中减去 1，低于 0 的值变为黑色；这种模式被称为“加暗”。

减法

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

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

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

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

【讨论】：

我正在搜索一个带有颜色替换过滤器的示例。