5

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.

long
  • 3,692
  • 1
  • 22
  • 38

1 Answers1

1

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).

Community
  • 1
  • 1
net.uk.sweet
  • 12,444
  • 2
  • 24
  • 42
  • 1
    Technically, your solution is ok, but I have a lot of dynamically added objects on my canvas. So it is quite hard to implement and I think in my case the performance will be not good enought (but I didn't do any tests). My temporary solution: just put the function into kineticJS file. Not perfect, but it works. – long Feb 17 '14 at 12:03