使用 Fabric.js stable 创建自定义图像温度过滤器

Question

我使用fabric.js 5.3.0，我正在尝试创建一个自定义温度过滤器，我知道fabric.js有很多API更改，我尝试在线搜索，但没有任何效果。所以让我们看看到目前为止我得到了什么。

所以我所做的每次搜索，或者我询问的每个机器人都给了我不同的答案，这非常令人困惑。我想创建一个基于canvas2d而不是webgl的温度自定义过滤器，因为..我不知道webgl！

如果类似的事情在 webGL 中并不那么复杂，并且有人可以提供一个示例，那就太好了......

我知道应该执行

applyTo2d

函数，这样我就可以获取图像数据并对其进行操作？但在我的例子中，只有

applyTo

函数被调用，我认为这是因为它仍然适用于 webGL 而不是 canvas。我可能是错的，我调查了很多，每次都得到不同的信息，所以仍然很困惑。

我尝试了一些代码建议来禁用此过滤器的 webGL，但没有任何意义。

这是我到目前为止的代码：

//@ts-ignore
fabric.Image.filters.Temperature = fabric.util.createClass({
  type: 'Temperature',

  initialize: function(options: any) {
    options = options || {};
    this.temperature = options.temperature || 0;
  },

  applyTo: function(options: any) {
    var imageData = options.imageData,
      data = imageData.data,
      i, len;

    for (i = 0, len = data.length; i < len; i += 4) {
      data[i] += this.temperature;
      data[i + 2] -= this.temperature;
    }
  },
  
  toJSON: function() {
    return {
      temperature: this.temperature
    };
  }
});

// @ts-ignore
fabric.Image.filters.Temperature.fromObject = function(object) {
  // @ts-ignore
  return new fabric.Image.filters.Temperature(object);
};

我确信我尝试了很多其他的事情..我在这个问题上呆了一个多星期，我只是对迄今为止得到的所有乱七八糟的信息感到困惑。

所以一般来说我想知道如何创建自定义过滤器，并且我很确定学习 webGL 会让事情变得复杂，但是如果图像处理部分像画布一样简单..如果不是的话很酷..我需要画布解决方案。

Answer 1

所以..是的，我真的不介意学习webgl，但如果我能为fabric.js找到任何自定义的webgl图像过滤器，我至少可以知道如何应用它，那就太棒了，如果有人可以发布它那就太好了。

anywho 我终于得到了一个可以与 canvas2d 一起使用的自定义过滤器。

首先..我需要强制canvas2d而不是webGL:

 //@ts-ignore
    fabric.initFilterBackend = function() {
      return (new fabric.Canvas2dFilterBackend());
    };

现在我想要 -1 到 1 的范围，其中默认值为零，并且效果会很微妙，所以我这样做了：

//@ts-ignore
fabric.Image.filters.Temperature = fabric.util.createClass({
  type: 'Temperature',

  initialize: function(options: any) {
    options = options || {};
    // Scale the temperature factor to make adjustments more subtle
    this.temperature = (options.temperature || 0) * 50; // Default temperature value

  },
  isNeutralState: function () {
    return this.temperature === 0;
  },

  applyTo: function(options: any) {
    let imageData = options.imageData;
    let data = imageData.data;
    const len = data.length;
    const temperature = this.temperature; // Scale temperature to be between -255 and 255

    for (var i = 0; i < len; i += 4) {
      // Apply temperature adjustment to each pixel
      data[i] += temperature; // Red channel
      data[i + 1] += temperature; // Green channel
    }

    options.imageData = imageData;

    // Set willReadFrequently to true
    //options.ctx.canvas.willReadFrequently = true;
  },
    
  toJSON: function() {
    console.info('toJSON');
    return {
      type: this.type,
      temperature: this.temperature
    };
  },
  toObject: function () {
    console.info('toObject');
    return {
      type: this.type,
      temperature: this.temperature,
    };
  },
});

// @ts-ignore
fabric.Image.filters.Temperature.fromObject = function(object) {
  // @ts-ignore
  return new fabric.Image.filters.Temperature(object);
};

请原谅所有

//@ts-ignore

，我正在进行一个 angular17 打字稿项目。