0

フィルターは kineticJS で十分に文書化されていないため、画像に 2 つのフィルターを適用する際に問題が発生します。いくつかの質問:

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) フィルタ セットがあるかどうかを正しく確認するにはどうすればよいですか? functionを試し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 ) は以下のように述べています。私が理解していないのは、「set hue shift amount @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

markE の答えは、画像に複数のフィルターを追加するすぐに使える方法はまだないという点で正しいです。

ただし、回避策があります。

  1. キネティック イメージの作成
  2. それに単一のフィルターを追加します
  3. 最初のキネティック画像で使用toDataURL()して、画像データを取得します
  4. dataURL手順 3の を使用して 2 番目のキネティック イメージを作成します。
  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 で使用しようとするとセキュリティ エラーが発生するため、JSFiddle を投稿できませんtoDataURL()。ただし、ローカルホストでテストして、自分で試すことができます。画像を処理するために別の外部ライブラリを使用する必要なく、代替として問題なく動作します。

于 2013-09-18T20:41:13.870 に答える
2

1. 現時点では、一度に 1 つのフィルターしか適用できないと思います。

myImage.setFilterただし、別の種類のフィルターに変更するために使用できます

Kinetic の画像用ソース コードを確認しました。

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

114 行目では、画像の applyFilter メソッドを定義しています。

このメソッドは、一連の filter を反復処理せず、1 つの 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. 色相の変更

pixelShiftHuecolorPack.js には次のメソッドがあります。

  • ピクセルの色を HSL に変換します。
  • 指定した角度だけ色相をシフトします
  • 色を RGB に戻します
  • 変換された色の R、G、B 値を返します

そのメソッドは明るくするフィルターで使用されますが、独自のフィルターとしては実装されていません。

もちろん、コードを使用して色相を自分でシフトすることもできます。

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

于 2013-09-18T19:55:16.040 に答える
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 に答える