Fabric.js BlendColor图像滤镜 [英] Fabric.js BlendColor Image Filter

问题描述

我无法在Fabric.js的画布上更改小png的颜色.

I am having trouble changing the color of a small png on the canvas in Fabric.js.

在我的研究中，我发现我可以使用new fabric.Image.filters.Tint()来按照期望的方式修改图像的颜色.但是，Fabric v2中没有Tint()构造函数.根据此页面，Tint()现在是BlendColor()过滤器的一部分.我已经尝试过使用BlendColor()进行各种操作，但是还没有使它起作用.非常感谢有关如何使用BlendColor()或其他过滤器来完成我想要的任何建议.

In my research, I found that I could use new fabric.Image.filters.Tint() to modify the color of an image in the way that I was looking to. However, there is no Tint() constructor in v2 of Fabric. According to this page, Tint() is now part of the BlendColor() filter. I have tried various things with BlendColor(), but I have yet to get it to work. Any advice on how to use BlendColor() or some other filter to accomplish what I want is much appreciated.

我最好的猜测是做这样的事情，但这是行不通的:

My best guess is to do something like this, but it doesn't work:

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

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

推荐答案

将mode:'tint'设置为BlendColor过滤器.

set mode:'tint' to BlendColor filter.

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

演示

DEMO

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>

这篇关于Fabric.js BlendColor图像滤镜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！