Fabric.js v2中如何用BlendColor滤镜实现原Tint滤镜的图片改色功能？

我完全懂你遇到的这个困扰——Fabric.js版本迭代后API变动确实容易让人懵，尤其是滤镜这块的调整。别担心，用BlendColor滤镜完全能实现你要的图片改色效果，我给你拆解下具体的用法：

核心原理 #

原来的Tint()滤镜本质就是给图片叠加一层半透明的纯色，而BlendColor滤镜正是用来实现颜色混合的，通过调整颜色值和透明度（opacity），就能完美复刻Tint的效果。

具体实现步骤&代码示例 #

下面是完整的代码流程，从加载图片到应用着色效果：

// 初始化Fabric画布
const canvas = new fabric.Canvas('your-canvas-id');

// 加载目标PNG图片
fabric.Image.fromURL('your-image.png', function(img) {
  // 1. 创建BlendColor滤镜实例
  // color: 你要的目标着色（支持十六进制、RGB、RGBA等格式）
  // opacity: 着色的深浅（0-1，0无效果，1完全覆盖原图颜色）
  const tintFilter = new fabric.Image.filters.BlendColor({
    color: '#ff0000', // 示例：红色
    opacity: 0.5 // 示例：半透明，调整这个值控制着色强度
  });

  // 2. 给图片添加滤镜
  img.filters.push(tintFilter);

  // 3. 应用滤镜并渲染画布
  img.applyFilters(function() {
    canvas.add(img);
    canvas.renderAll();
  });
});

关键参数说明 #

• color：支持多种颜色格式，比如'#ff0000'、'rgb(255,0,0)'、'rgba(255,0,0,0.5)'都可以。
• opacity：这个参数直接对应原来Tint滤镜的着色强度，值越小，原图保留越多；值越大，着色越明显。如果设为1，图片会完全变成你指定的颜色。

额外小技巧 #

如果你需要更丰富的混合效果，可以调整BlendColor的mode参数（默认是'multiply'），比如改成'overlay'或'screen'，能得到不同的着色质感，不过如果只是要和旧版Tint一致的效果，用默认的multiply模式+合适的opacity就足够了。

内容的提问来源于stack exchange，提问作者Burgan