在fabric.js中用颜色填充图像

Posted 2023-02-22

技术标签:

【中文标题】在fabric.js中用颜色填充图像【英文标题】：Fill image inside with color in fabric.js 【发布时间】：2016-09-01 07:36:04 【问题描述】：

基本上，我有一个 png 透明图像，我想在图像内部填充颜色，同时使用 fabricjs 保持外部透明度。

我尝试使用 Tint，它适用于下图。

var canvas = this.__canvas = new fabric.Canvas('myCanvas'),
f = fabric.Image.filters;

fabric.Image.fromURL('imgpath/img.png', function (img) 
    var oImg = img.set( left: 50, top: 100 ).scale(1);
    var tint = new fabric.Image.filters.Tint(
        color: '#ff6c78',
        opacity: 1
    );

    oImg.filters.push(tint);
    oImg.applyFilters(canvas.renderAll.bind(canvas));

    canvas.add(oImg).renderAll();
    canvas.setActiveObject(oImg);
 );

现在，我有一个内部和外部都是透明的图像。下图是否有可能得到类似的结果？

(a) 原图 (b) 使用 Tint 的结果 (c) 我实际寻找的结果

我不确定这是否完全可以使用fabricjs。如果没有，那么还有哪些其他的 javascript 框架可以使用？

以下是原图。

感谢任何帮助。谢谢。

【问题讨论】：

【参考方案1】：

因为这些是矢量图像。我会将它们转换为 SVG 对象，然后您所要做的就是更改 SVG 中 <path> 元素的 fill: yourColorChoice;。

这种方法不需要任何JS，都可以通过纯CSS来完成。

您可以使用 Adobe Illustrator 将图像转换为 SVG 元素（我认为有些免费软件也可以做到这一点）

【讨论】：

OP说如何在fabricJS中实现这个