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

Question

Basically, I have a png transparent image and I want to fill color inside the image while maintaining the outer transparency using fabricjs.

I tried using Tint and it works for the below image.

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);
 });

Now, I have an image which is transparent on the inside as well as out. Is it possible to get similar result for the below image?

• (a) Original image
• (b) The result using Tint
• (c) The result I am actually looking for

I am not sure whether this is entirely possible using fabricjs. If not, then what other javascript frameworks are there that can be used?

Below are the original images.

Any help is appreciated. Thank you.

Answer 1

Since these are vector images. I would convert them to SVG objects and then all you have to do is change the fill: yourColorChoice; of the <path> element in the SVG.

With this method you don't need any JS, it can all be done via pure CSS.

You can convert images to SVG elements using Adobe Illustrator (I think theres some free software that does it as well)