Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

extending KineticJS - custom filter

I'm trying do add contrast as a filter to KineticJS (I know, it's not a filter technically). It works, but I want to add contrast() modifier too (like noise() for Noise filter etc.).

Here is my function (after including KineticJS 5.0.1 library):

(function() {

    Kinetic.Filters.Contrast = function(imageData) {
        var data = imageData.data,
            len = data.length,
            i,
            adjust = this.contrast(),
            x = [];

            //[cut] processing, not important here
    };

    Kinetic.Factory.addGetterSetter(Kinetic.Node, 'contrast', 0, null, Kinetic.Factory.afterSetFilter);
})();

As you can see, Kinetic.Factory.addGetterSetter should provide me contrast() modifier, but it doesn't. When I run the code, resuls is TypeError: imgs.contrast is not a function:

imgs.filters([Kinetic.Filters.Contrast]);
imgs.contrast(30);

What I'm doing wrong?

//update
My temporary solution: just put my function into kineticJS file. Not perfect, but it works.

like image 513
long Avatar asked Nov 11 '22 13:11

long


1 Answers

From what I can make out from the documentation, what you've got should work. However, when I tried it myself, I ended up with the same error you're getting. Drawing on this stackoverflow answer, it looks like an alternative is to set the filter via the config object of the Kinetic image:

    var myImg = new Kinetic.Image({
      image: imageObj,
      filter: Kinetic.Filters.Contrast
    });

Fiddle here (the error is to do with attempting to apply your filter to an image from another domain and can, I think, be discounted).

like image 126
net.uk.sweet Avatar answered Nov 14 '22 22:11

net.uk.sweet