Javascript Fabric Js图像混合过滤器问题

Javascript Fabric Js图像混合过滤器问题,javascript,fabricjs,Javascript,Fabricjs,当我尝试对fabric JS中的图像应用混合过滤器时,我得到了一些奇怪的行为。当我应用过滤器时,它只是将图像变白,而不是添加指定的颜色。谁能解释一下我做错了什么?下面是我尝试添加过滤器的代码和JS fiddle的链接。 谢谢 函数init(){ var canvas=this.\uu canvas=new fabric.canvas('c1'{ 光标悬停:“指针” }); var url=['https://dl.dropboxusercontent.com/s/ix6mvv49wnx226a

当我尝试对fabric JS中的图像应用混合过滤器时,我得到了一些奇怪的行为。当我应用过滤器时,它只是将图像变白,而不是添加指定的颜色。谁能解释一下我做错了什么?下面是我尝试添加过滤器的代码和JS fiddle的链接。 谢谢

函数init(){
var canvas=this.\uu canvas=new fabric.canvas('c1'{
光标悬停:“指针”
});
var url=['https://dl.dropboxusercontent.com/s/ix6mvv49wnx226a/Central-Richmon_clipped_rev_1.png?dl=0',
'https://dl.dropboxusercontent.com/s/jjp2l0kgdw8iitb/Laurel-Heights.png?dl=0',
'https://dl.dropboxusercontent.com/s/wdk02w40z1466g5/LoneMountain.png?dl=0',
'https://dl.dropboxusercontent.com/s/t6tnptndu2k22xr/OuterRichmond.png?dl=0',
'https://dl.dropboxusercontent.com/s/tv4rhwjc0nw35iz/Presidio-Heights.png?dl=0',
'https://dl.dropboxusercontent.com/s/ttbf390w2vdx4id/Inner-richmond.png?dl=0'];
对于(var i=0;i
更改

var filter = new fabric.Image.filters.Blend({
  image: img
});


文档在这方面非常混乱,但本质上图像参数用于定义要与目标混合的图像。在您的示例中,您试图将图像与自身混合,这将产生一个完全白色的图像。

我认为您希望使用色调过滤器,而不是混合过滤器

将当前筛选代码替换为

img.filters.push(new fabric.Image.filters.Tint({
    color: '#00f900',
    // adjust as required
    opacity: 0.1
}));
您的图像不是完全白色的,只有当添加的(img.red+img.red,img.blue+…)颜色超过255(这实际上是图像的大部分,但您仍然可以看到图像的微弱阴影。如果您的图像较暗,则可以更好地看到此效果)


小提琴-

var filter = new fabric.Image.filters.Blend({});
img.filters.push(new fabric.Image.filters.Tint({
    color: '#00f900',
    // adjust as required
    opacity: 0.1
}));