javascript - Fabric.js BlendColor 图像过滤器

Question

我在更改 Fabric.js Canvas 上小 png 的颜色时遇到问题。

在我的研究中，我发现我可以使用new Fabric.Image.filters.Tint()按照我想要的方式修改图像的颜色。然而，Fabric v2 中没有 Tint() 构造函数。根据this page ，Tint() 现在是 BlendColor() 过滤器的一部分。我已经用 BlendColor() 尝试了各种方法，但还没有让它发挥作用。非常感谢任何有关如何使用 BlendColor() 或其他过滤器来完成我想要的事情的建议。

我最好的猜测是做这样的事情，但它不起作用:

var filter = new fabric.Image.filters.BlendColor({
 color: '#c9f364',
 mode: 'multiply'
});

canvas.getObjects()[0].filters.push(filter);
canvas.getObjects()[0].applyFilters();
canvas.renderAll();

Answer 1

将 mode:'tint' 设置为 BlendColor 滤镜。

var filter = new fabric.Image.filters.BlendColor({
  color: 'red',
  mode: 'tint',
  alpha: 0.5
});

演示

var canvas = new fabric.Canvas('c');
fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg',function(img){
  img.set({
   scaleX:0.3,
   scaleY:0.3
  })
  canvas.add(img);
  var filter = new fabric.Image.filters.BlendColor({
   color:'red',
   mode: 'tint',
   alpha: 0.5
  });
  img.filters.push(filter);
  img.applyFilters();
  canvas.renderAll();
},{
 crossOrigin:'null'
})

canvas{
 border:2px solid #000;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='c' width=400 height=400></canvas>