如何解决使用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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。