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

Question

基本上，我有一个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框架可供使用？

以下是原始图片。

感谢任何帮助。谢谢。

Answer 1

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

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

您可以使用Adobe Illustrator将图像转换为SVG元素（我认为也可以使用一些免费软件来实现）