使用Fabric.js模拟一种彩色打印

问题描述

我想使用Fabric.js将滤镜应用于全彩色图像，以模拟仅使用一种颜色的墨水打印图像时的外观。非常类似于灰度，但是具有任意的基色而不是灰色。到目前为止，我的方法是将图像转换为灰度，然后使用BlendColor调整亮度并应用色调或叠加。该解决方案倾向于产生太暗或褪色的图像。技术上最正确/最准确的方法是什么？

这是我到目前为止尝试过的：

var grayscale = ThirdPartyLibrary.getFilter('grayscale'); // using the grayscale filter from another lib
var brightness = new fabric.Image.filters.Brightness({
  brightness: 0.2
});
var tint = new fabric.Image.filters.BlendColor({
  color: '#3b7998',mode: 'tint',alpha: 0.5
});

element.applyFilters([grayscale,brightness,tint]);

任何输入都值得赞赏，即使只是基本方法，我也可以弄清楚如何在Fabric.js中实现过滤器。

解决方法

如果您想获得这样的效果：

首先应该使用average模式的fabricJS灰度过滤器，然后使用multiply模式的blendColor来获取它。

图像亮度不应改变，但不能在所有颜色上完美配合。

您需要选择饱和度和明度最大为50％的颜色。您只需将HUE作为免费参数即可。

您可以使用面料颜色工具生成它们：

    const hsl = `hsl(${Math.round(value * 360)},100%,50%)`;
    const [r,g,b] = fabric.Color.sourceFromHsl(hsl);

fabricjs image-processing printing