扩展KineticJS - 自定义过滤器

时间:2014-02-11 10:20:25

标签: javascript html5 image-processing canvas kineticjs

我尝试添加对比度作为KineticJS的过滤器(我知道,它不是技术上的过滤器)。它有效,但我想添加contrast()修饰符(如noise()用于“噪波过滤器”等。)。

这是我的功能(包括KineticJS 5.0.1库之后):

(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);
})();

正如您所看到的,Kinetic.Factory.addGetterSetter应该为我提供contrast()修饰符,但它并没有。当我运行代码时,结果是TypeError: imgs.contrast is not a function

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

我做错了什么?

//更新
我的临时解决方案:将我的函数放入kineticJS文件中。不完美,但它有效。

1 个答案:

答案 0 :(得分:1)

documentation我能得出的结果来看,你所得到的应该是有用的。但是,当我自己尝试时,我最终得到了同样的错误。借鉴这个stackoverflow answer,看起来另一种方法是通过动力学图像的配置对象设置过滤器:

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

小提琴here(错误与尝试将过滤器应用于来自其他域的图片有关,我认为可以打折)。