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

Question

由于在 kineticJS 中对过滤器的记录很差，我在将两个过滤器应用于图像时遇到了问题。几个问题：

1) 我想将模糊和增亮滤镜设置为相同的图像。

两者分开工作：

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() 函数，但萤火虫的console.log 只显示“函数”。

3) 有一些 ShiftHue-filter，但显然我一个字都听不懂。请参阅：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 的回答是正确的，他说目前还没有开箱即用的方式向图像添加多个过滤器。

但是有一个解决方法：

1. 创建动态图像
2. 向其添加单个过滤器
3. 在第一张 Kinetic 图像上使用toDataURL()，以获取图像数据
4. 使用第 3 步中的 dataURL 创建第二个动态图像
5. 为步骤 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);