Question

由于过滤器在kineticJS中记录不足，因此在将两个滤镜应用于图像时出现问题。几个问题：

1）我想将Blur和Brighten滤镜设置为相同的图像。

两者都是单独的：

if (!!image.getAttr('filterBrightness')) {
   image.setFilter(Kinetic.Filters.Brighten);
}
image.setFilterBrightness(120);

和

if (!!image.getAttr('filterAmount')){
   image.setFilter(Kinetic.Filters.Blur);
}
image.setFilterRadius(2);

我试过

image.applyFilter(Kinetic.Filters.Blur)
image.setFilterAmount(2);

并且当再次应用另一个过滤器时，它再次起作用，模糊过滤器关闭了。

2）如何正确检查是否有过滤器设置？我尝试了getFilter()函数，但是firebug的console.log只显示了“function”。

3）有一些ShiftHue过滤器，但显然我不理解源中的一个词。请参阅：http://kineticjs.com/docs/Kinetic.Filters.html，来源（http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.js）如下所示。我不明白的是“设置色调偏移量@name setFilterBrightness”这是源文档中的错误吗？

如何使用该过滤器？设置过滤器

  /**
     * get hue shift amount.  The shift amount is a number between 0 and 360.
     * @name getFilterBrightness
     * @method
     * @memberof Kinetic.Image.prototype
     */

    /**
     * set hue shift amount
     * @name setFilterBrightness
     * @method
     * @memberof Kinetic.Image.prototype
     */

谢谢！

Answer 1

<强> 1。此时，我相信您一次只能应用1个过滤器。

但您可以使用myImage.setFilter更改为其他类型的过滤器

我刚刚看了一下Kinetic的图像源代码：

https://github.com/ericdrowell/KineticJS/blob/master/src/shapes/Image.js

第114行定义了一个图像的applyFilter方法。

该方法不会迭代一系列过滤器，只是一个filter.call。

现在没有多个过滤器。

我还在问题部分中看到有多个过滤器的请求被归类为“增强”（意味着尚未提供）。

https://github.com/ericdrowell/KineticJS/issues/548

目前，如果您需要多个过滤器，则必须在项目中添加图像处理插件。

<强> 2。检查是否已设置过滤器

在内部，image.clearFilter的工作原理如下：

    clearFilter: function() {
        this.filterCanvas = null;
        this._applyFilter = false;
    }

所以你应该能够检查filterCanvas是否为null或_applyFilter == false;

第3。改变色调

colorPack.js中有一个pixelShiftHue方法：

将像素颜色转换为HSL，
将色调移动指定的度数
将颜色转换回RGB
返回转换颜色的R，G，B值

该方法用于增亮过滤器，但它没有实现为自己的过滤器。

当然，您可以使用代码自行调整色调。

https://github.com/ericdrowell/KineticJS/blob/355c80088f396e21f412eb743620f3c70ff39023/src/filters/ColorPack.js

Answer 2

markE的回答是正确的，说没有开箱即用的方法来为图像添加多个过滤器。

但是有一种解决方法：

创建动态图像
添加一个过滤器
在第一张Kinetic图像上使用toDataURL()，以获取图像数据
使用步骤3中的dataURL创建第二个动态图像
为步骤4中创建的图像添加新过滤器

以下是基于2 html5canvastutorials的示例：

过滤教程：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-invert-image-tutorial/

和

toDataURL()教程：http://www.html5canvastutorials.com/kineticjs/html5-canvas-stage-data-url-with-kineticjs/

var imageObj = new Image();
imageObj.onload = function() {
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 300
  });
  var layer = new Kinetic.Layer();

  //Step 1
  darth = new Kinetic.Image({
    x: 10,
    y: 10,
    image: imageObj,
    draggable: true,
    filter: Kinetic.Filters.Grayscale, //Step 2
    filterRadius: 20
  });

  layer.add(darth);
  stage.add(layer); 

  //Step 3
  var filteredDarthURL = darth.toDataURL();

  var imageObj2 = new Image();
  imageObj2.onload = function() {
    //Step 4
    var doubleFilteredDarth = new Kinetic.Image({
      x: 10,
      y: 10,
      image: imageObj2,
      draggable: true,
      filter: Kinetic.Filters.Blur, //Step 5
      filterRadius: 20
    });
    darth.destroy(); //or darth.remove() or darth.hide()
    layer.add(doubleFilteredDarth);
    layer.draw();
  }
  imageObj2.src = filteredDarthURL;


};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

不幸的是，由于尝试在JSfiddle上使用toDataURL()的安全性错误，我无法发布JSFiddle。但是你可以在你的本地主机上测试它并自己尝试一下。作为替代方案可以正常工作，而无需使用其他外部库来处理图像。

Answer 3

KineticJS> = 5.0

imgs.filters([Kinetic.Filters.Grayscale, Kinetic.Filters.Brighten, Kinetic.Filters.Sepia]);
imgs.brightness(-0.1);
imgs.noise(0.8);

KineticJS对图像应用了多个滤镜，我也看到了色调滤镜

3 个答案: