【问题标题】:extending KineticJS - custom filter扩展 KineticJS - 自定义过滤器
【发布时间】:2014-03-09 01:46:54
【问题描述】:

我正在尝试向 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 文件中。不完美,但它有效。

【问题讨论】:

    标签: javascript html image-processing canvas kineticjs


    【解决方案1】:

    从我从documentation 中可以看出,您所拥有的应该可以工作。但是,当我自己尝试时,我最终遇到了同样的错误。借鉴这个stackoverflow answer,看起来另一种方法是通过动力学图像的配置对象设置过滤器:

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

    Fiddle here(错误与尝试将过滤器应用于来自另一个域的图像有关,我认为可以打折)。

    【讨论】:

    • 从技术上讲,您的解决方案还可以,但我的画布上有很多动态添加的对象。所以它很难实现,我认为在我的情况下性能还不够好(但我没有做任何测试)。我的临时解决方案:只需将函数放入 kineticJS 文件中。不完美,但它有效。
    猜你喜欢
    • 2014-12-01
    • 2015-09-11
    • 2020-03-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多