Javascript Fabric.js-色调过滤器

我似乎无法让fabric.js的色调过滤器功能发挥作用，也找不到任何使用它的例子。我试过：

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

我也尝试了

#00ff00

而不是

绿色

，但两者都只是将图像变黑

我有一些png的只是黑色和透明的（例如基本形状），我想能够改变它们的颜色，我不知道这是否可行，但我觉得色调听起来很有希望，我就是无法让它工作

我也在照片上试过，只是变黑了，我在代码中的同一个地方使用了其他过滤器（比如反转），效果很好

任何帮助都将不胜感激

更新： 使用了完整的JS，图片三显示为一个黑匣子

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);
});

---

我写了这个过滤器，我在我们的一个项目中大量使用它，到目前为止效果很好。但是我缺少的是对applyFilters的调用——也许你可以发布更多的代码

此外，我认为我总是采用如下颜色：

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

---

表示没有颜色名称，前面没有哈希。我知道颜色的解析器应该更健壮一些。另外，请确保此过滤器仅适用于具有alpha通道（表示半透明png文件）的图像。

我分析了Tint filter的原始类，发现该行

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

应该这样调整

var rgb = this.color;

使其按预期工作。当然，那个么rgb变量是无用的，你们可以直接把它改成这个颜色，但我个人更喜欢单线变化

我不确定将十六进制转换成整数然后再转换成字符串的最初目的是什么，因为这对我来说毫无意义

---

您可能不想修改fabric.js源代码，因此我建议您创建自定义过滤器类，如本教程“过滤器”部分中所述：

我对JPEG图像或PNG图像（具有透明背景）有相同的问题

我发现Tint类在这个问题上不能正常工作，所以我稍微改变了一下。您可以在Google Groups上找到该线程：

下面是我的变通方法类（它通过使用完整的十六进制值来工作，但您可以轻松地根据需要调整它）：

希望这能帮助别人

L

编辑

在Tint Filter类（Github:）中进行了一些更改

我再次测试了它，但仍然没有运气，所以我再次稍微改变了它。你可以在谷歌群组（）上找到源代码+解释

编辑#2

---

好的，Kienz制作了一个JSFIDLE（），它使用了Tint Filter类进行错误修复，并使其正常工作。我建议像他那样实施它。

我也遇到了同样的问题。它原来是我使用的fabric 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
      });
    }
  });

/**
*着色过滤器类
*改编自
*@class fabric.Image.filters.Tint
*@memberOf fabric.Image.filters
*@extends fabric.Image.filters.BaseFilter
*@有关构造函数定义，请参见{@link fabric.Image.filters.Tint#initialize}
*@见{@linkhttp://fabricjs.com/image-filters/|ImageFilters演示}
*@带有十六进制颜色和不透明度的着色过滤器示例
*var filter=new fabric.Image.filters.Tint({
*颜色：'#3513B0'，
*不透明度：0.5
* });
*object.filters.push（过滤器）；
*applyFilters（canvas.renderAll.bind（canvas））；
*@带有rgba颜色的着色过滤器示例
*var filter=new fabric.Image.filters.Tint({
*颜色：“rgba（53,21,176,0.5）”
* });
*object.filters.push（过滤器）；
*applyFilters（canvas.renderAll.bind（canvas））；
*/
fabric.Image.filters.Tint=fabric.util.createClass（fabric.Image.filters.BaseFilter，/**@lends fabric.Image.filters.Tint.prototype*/{
/**
*过滤器类型
*@param{String}类型
*@默认值
*/
类型：“色调”，
/**
*建造师
*@memberOf fabric.Image.filters.Tint.prototype
*@param{Object}[options]选项对象
*@param{String}[options.color=#000000]color为图像着色
*@param{Number}[options.opacity]控制着色效果透明度的不透明度值（0..1）
*/
初始化：函数（选项）{
选项=选项| |{}；
this.color=options.color | |'#000000'；
this.opacity=typeof options.opacity！=“未定义”
？选项。不透明度
：new fabric.Color（this.Color）.getAlpha（）；
console.log（this.color+“”+this.opacity）；
},
/**
*将筛选器应用于画布元素
*@param{Object}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，字母1，
来源；
source=newfabric.Color（this.Color）.getSource（）；
tintR=源[0]*此为不透明度；
tintG=源[1]*此为不透明度；
tintB=源[2]*此为不透明度；
alpha1=1——这是不透明度；
对于（i=0；i

有一件事我不知道

//$oCanvas is my fabric Canvas object
//data.color could be 'ff0000' but not 'f00' not anything else like fabric.Color
$img.filters[0] = new fabric.Image.filters.Tint(data.color); 
$img.applyFilters($oCanvas.renderAll.bind($oCanvas));

/**
   * 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
      });
    }
  });