Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fabric.js - Tint filter

I can't seem to get the tint filter feature of fabric.js to work, or find any example of it being used. I have tried:

img.filters[0] = new f.Tint({
    color:'green'
});

I've also tried #00ff00 instead of green, but both of them just turn the image black.

I have a number of png's that are just only black and transparent (e.g. basic shapes), and I want to be able to change the colour of them, I don't know if this is possible or not, but I figured tint sounded promising, I just can't get it to work.

I've also tried it on photos, just turns black, and I've used other filters (like invert) in the same place in the code and it worked fine.

Any help would be appreciated.

UPDATE: Full JS used, picture three just appears as a black box.

var canvas = new fabric.Canvas('c');
var f = fabric.Image.filters;

fabric.Image.fromURL('img/picture3.jpg', function(img) {
  img.set({
    left: 100,
    top: 120,
    angle: 0
  });
  img.filters[0] = new f.Tint({
      color:'00FF00'
  });
  img.applyFilters(canvas.renderAll.bind(canvas));
  canvas.add(img);
});
like image 334
Ben Avatar asked Feb 19 '23 21:02

Ben


1 Answers

I wrote that filter and I'm using it heavily in one of our projects and it worked good so far. But what I'm missing there is the call to applyFilters - maybe you could post a little more code?

Also I think I always applied the colors like:

img.filters[0] = new f.Tint({
    color:'FF0000'
});

Means no color names, no hash in front. I know that the parser for the colors should be a little more robust there. Also be sure that this filter will only work for images that have an alpha channel - means semi transparent png files.

like image 200
Alexander Kludt Avatar answered Feb 27 '23 11:02

Alexander Kludt