在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来完成。

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