Fabric Js图像混合过滤器问题答案

【问题标题】：Fabric Js Image blend Filter issueFabric Js图像混合过滤器问题
【发布时间】：2015-07-05 05:18:18
【问题描述】：

当我尝试将混合过滤器应用于织物 JS 中的图像时，我遇到了一些奇怪的行为。当我应用过滤器时，它只是使图像变白而不是添加指定的颜色。谁能阐明我做错了什么？下面是我尝试添加过滤器的 JS fiddle 的代码和链接。谢谢 http://jsfiddle.net/ahalbleib/bdofdbqg/2/

function init() {
    var canvas = this.__canvas = new fabric.Canvas('c1', {
        hoverCursor: 'pointer'
    });

    var urls = ['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'];
    for (var i = 0; i < urls.length; i++) {
        fabric.Image.fromURL(urls[i], function (img) {

            img.perPixelTargetFind = true;
            img.targetFindTolerance = 4;
            img.hasControls = img.hasBorders = false;
            img.filters.push(filter);
            var filter = new fabric.Image.filters.Blend({
                image: img
            });
            filter.color = '#00f900';
            filter.mode = 'add';
            img.filters.push(filter);
            canvas.add(img).renderAll();
            img.applyFilters(canvas.renderAll.bind(canvas));
        }, {
            crossOrigin: 'Anonymous'
        });
    }

    canvas.findTarget = (function (originalFn) {
        return function () {
            var target = originalFn.apply(this, arguments);
            if (target) {
                if (this._hoveredTarget !== target) {
                    canvas.fire('object:over', {
                        target: target
                    });
                    if (this._hoveredTarget) {
                        canvas.fire('object:out', {
                            target: this._hoveredTarget
                        });
                    }
                    this._hoveredTarget = target;
                }
            } else if (this._hoveredTarget) {
                canvas.fire('object:out', {
                    target: this._hoveredTarget
                });
                this._hoveredTarget = null;
            }
            return target;
        };
    })(canvas.findTarget);
}

init();

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

我认为您想使用 Tint 滤镜而不是 Blend 滤镜。

用

替换您当前的过滤器代码

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

你的图像不是全白的，只有当添加的 (img.red + img.red, img.blue + ...) 颜色超过 255 时它才是白色的（这实际上是图像的大部分，但你仍然可以看到图像的微弱阴影。如果图像较暗，您可以更好地看到这种效果）

小提琴 - http://jsfiddle.net/m37gyLbf/

【讨论】：

【解决方案2】：

改变

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

到

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

文档对此非常困惑，但本质上，图像参数用于定义要与目标混合的图像。在您的示例中，您尝试将图像与其自身混合，从而产生一个完全白色的图像。

【讨论】：