4

fabric.js のティント フィルター機能を動作させることができないか、使用されている例を見つけることができないようです。私が試してみました：

img.filters[0] = new f.Tint({
    color:'green'
});

#00ff00の代わりにも試しましgreenたが、どちらも画像を黒くするだけです。

黒と透明（基本的な形状など）だけのpngがいくつかあり、それらの色を変更できるようにしたいのですが、これが可能かどうかはわかりませんが、色合いが有望だと思いました、私はそれを機能させることができません。

写真でも試してみましたが、黒くなり、コードの同じ場所で他のフィルター（反転など）を使用しましたが、うまくいきました。

どんな助けでも大歓迎です。

更新: 完全な JS が使用され、画像 3 はブラック ボックスとして表示されます。

var canvas = new fabric.Canvas('c');
var f = fabric.Image.filters;

fabric.Image.fromURL('img/picture3.jpg', function(img) {
  img.set({
    left: 100,
    top: 120,
    angle: 0
  });
  img.filters[0] = new f.Tint({
      color:'00FF00'
  });
  img.applyFilters(canvas.renderAll.bind(canvas));
  canvas.add(img);
});
4

5 に答える 5

4

私はそのフィルターを作成し、プロジェクトの1つで頻繁に使用しており、これまでのところうまく機能していました。しかし、私が見逃しているのは、applyFiltersの呼び出しです。もう少しコードを投稿できますか？

また、私はいつも次のような色を適用したと思います：

img.filters[0] = new f.Tint({
    color:'FF0000'
});

色の名前がなく、前にハッシュがないことを意味します。色のパーサーはもう少し堅牢でなければならないことを私は知っています。また、このフィルターがアルファチャンネルを持つ画像に対してのみ機能することを確認してください-半透明のpngファイルを意味します。

于 2012-10-12T08:05:00.007 に答える
3

Tintフィルターの元のクラスを分析したところ、この行が見つかりました

var rgb = parseInt(this.color, 10).toString(16);

このように調整する必要があります

var rgb = this.color;

期待どおりに動作するようにします。もちろん、rgb 変数は役に立たず、直接this.colorに変更できますが、個人的には 1 行の変更を好みます。

私には意味がないので、16進数を整数に変換してから文字列に変換する本来の目的が何であったかはわかりません。

おそらく、fabric.js ソースを変更したくないので、このチュートリアルのフィルター セクションで説明されているように、カスタム フィルター クラスを作成することをお勧めします: http://fabricjs.com/fabric-intro-part-2/

于 2013-01-24T08:53:03.037 に答える
0

似たようなことをしていて気づいたことの 1 つは、画像自体がキャンバスに追加されるまでフィルターが機能しないことです。

于 2015-03-21T22:06:49.467 に答える
0

私は同じ問題を抱えていました。それは、私が使用していたファブリック js のバージョンであることが判明しました。最新のものを取得せずに、他のものを壊すことを恐れて、必要なものだけを取得し、現在の色合いの実装をオーバーライドするカスタム フィルターとして使用しました。

これが私が使用したものです：

/**
   * Tint filter class
   * Adapted from <a href="https://github.com/mezzoblue/PaintbrushJS">https://github.com/mezzoblue/PaintbrushJS</a>
   * @class fabric.Image.filters.Tint
   * @memberOf fabric.Image.filters
   * @extends fabric.Image.filters.BaseFilter
   * @see {@link fabric.Image.filters.Tint#initialize} for constructor definition
   * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
   * @example <caption>Tint filter with hex color and opacity</caption>
   * var filter = new fabric.Image.filters.Tint({
   *   color: '#3513B0',
   *   opacity: 0.5
   * });
   * object.filters.push(filter);
   * object.applyFilters(canvas.renderAll.bind(canvas));
   * @example <caption>Tint filter with rgba color</caption>
   * var filter = new fabric.Image.filters.Tint({
   *   color: 'rgba(53, 21, 176, 0.5)'
   * });
   * object.filters.push(filter);
   * object.applyFilters(canvas.renderAll.bind(canvas));
   */
  fabric.Image.filters.Tint = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Tint.prototype */ {

    /**
     * Filter type
     * @param {String} type
     * @default
     */
    type: 'Tint',

    /**
     * Constructor
     * @memberOf fabric.Image.filters.Tint.prototype
     * @param {Object} [options] Options object
     * @param {String} [options.color=#000000] Color to tint the image with
     * @param {Number} [options.opacity] Opacity value that controls the tint effect's transparency (0..1)
     */
    initialize: function(options) {
      options = options || { };

      this.color = options.color || '#000000';
      this.opacity = typeof options.opacity !== 'undefined'
                      ? options.opacity
                      : new fabric.Color(this.color).getAlpha();

      console.log(this.color + " " + this.opacity);                
    },

    /**
     * Applies filter to canvas element
     * @param {Object} canvasEl Canvas element to apply filter to
     */
    applyTo: function(canvasEl) {
      var context = canvasEl.getContext('2d'),
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
          data = imageData.data,
          iLen = data.length, i,
          tintR, tintG, tintB,
          r, g, b, alpha1,
          source;

      source = new fabric.Color(this.color).getSource();

      tintR = source[0] * this.opacity;
      tintG = source[1] * this.opacity;
      tintB = source[2] * this.opacity;

      alpha1 = 1 - this.opacity;

      for (i = 0; i < iLen; i+=4) {
        r = data[i];
        g = data[i + 1];
        b = data[i + 2];

        // alpha compositing
        data[i] = tintR + r * alpha1;
        data[i + 1] = tintG + g * alpha1;
        data[i + 2] = tintB + b * alpha1;
      }

      context.putImageData(imageData, 0, 0);
    },

    /**
     * Returns object representation of an instance
     * @return {Object} Object representation of an instance
     */
    toObject: function() {
      return extend(this.callSuper('toObject'), {
        color: this.color,
        opacity: this.opacity
      });
    }
  });
于 2015-03-12T13:01:10.540 に答える