CODEWITHSUNDEEP
javascriptfabricjs
Aaron Halbleib
Aaron Halbleib

Reputation: 3

Fabric Js Image blend Filter issue

When I try to apply a blend filter to an image in fabric JS I am getting some strange behavior. When I apply the filter, it just whites out the image rather than adding the specified color. Can anyone shed some light on what I am doing wrong? Below is the code and a link to a JS fiddle where I try to add the filter. Thanks 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();

Upvotes: 0

Views: 1314

Answers (2)

potatopeelings
potatopeelings

Reputation: 41065

I think you want to use the Tint filter and not the Blend filter.

Replace your current filter code with 

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

You image was not fully white, it was white only when the added (img.red + img.red, img.blue + ...) colors exceeded 255 (which was actually most of the image, but you can still see a faint shadow of the image. If you had a darker image you can see this effect better)

Fiddle - http://jsfiddle.net/m37gyLbf/

Upvotes: 1

Matthew King
Matthew King

Reputation: 1362

Change

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

to

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

The docs are very confusing on this, but essentially the image parameter is for defining an image to blend the target with. In your example, you are attempting to blend the image with itself, which results in a completely white image.

Upvotes: 0

Related Questions