0

由于在 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
     */

谢谢！

4

3 回答 3

2

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

于 2013-09-18T19:55:16.040 回答
2

markE 的回答是正确的，说目前还没有开箱即用的方式向图像添加多个过滤器。

但是有一个解决方法：

  1. 创建动态图像
  2. 向其添加单个过滤器
  3. 在第一张 Kinetic 图像上使用toDataURL()，以获取图像数据
  4. dataURL使用步骤 3创建第二个动态图像
  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。但是您可以在本地主机上对其进行测试并自己尝试一下。作为替代方案可以正常工作，而无需使用另一个外部库来处理您的图像。

于 2013-09-18T20:41:13.870 回答
1

KineticJS >= 5.0

imgs.filters([Kinetic.Filters.Grayscale, Kinetic.Filters.Brighten, Kinetic.Filters.Sepia]);
imgs.brightness(-0.1);
imgs.noise(0.8);
于 2014-02-10T14:29:48.613 回答