Fabric.js视障人士无障碍适配咨询：画布级滤镜需求

Fabric.js 目前没有内置针对 protanopia（红色盲）、deuteranopia（绿色盲）等特定色盲类型的全画布滤镜，也没有一键应用到整个画布的现成配置选项。不过可以通过以下几种方式实现需求：

1. 自定义全局滤镜并批量应用 #

基于 Fabric.js 的滤镜系统，实现色盲矫正的颜色转换算法，然后批量添加到画布所有元素上：

示例：自定义红色盲矫正滤镜 #

// 定义Protanopia滤镜
fabric.Image.filters.Protanopia = fabric.util.createClass(fabric.Image.filters.BaseFilter, {
  type: 'protanopia',
  applyTo: function(canvasEl) {
    const context = canvasEl.getContext('2d');
    const imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height);
    const data = imageData.data;

    // 红绿色盲矫正矩阵转换逻辑
    for (let i = 0; i < data.length; i += 4) {
      const r = data[i];
      const g = data[i+1];
      const b = data[i+2];
      
      data[i] = 0.567 * r + 0.433 * g;
      data[i+1] = 0.558 * r + 0.442 * g;
      data[i+2] = 0.242 * r + 0.758 * b;
    }
    context.putImageData(imageData, 0, 0);
  }
});

// 批量应用到画布所有元素
canvas.getObjects().forEach(obj => {
  if (obj.filters) {
    obj.filters.push(new fabric.Image.filters.Protanopia());
    obj.applyFilters();
  }
});
canvas.renderAll();

2. 画布级后期统一处理 #

利用 Fabric.js 的 after:render 事件，在画布渲染完成后直接处理整个画布的图像数据，无需给单个元素加滤镜：

canvas.on('after:render', function() {
  const context = canvas.getContext('2d');
  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  // 替换为对应色盲类型的转换公式
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i+1];
    const b = data[i+2];
    
    data[i] = 0.567 * r + 0.433 * g;
    data[i+1] = 0.558 * r + 0.442 * g;
    data[i+2] = 0.242 * r + 0.758 * b;
  }
  context.putImageData(imageData, 0, 0);
});

3. CSS 滤镜配合画布容器（无需修改Fabric代码） #

在浏览器环境中，给画布容器添加自定义 CSS 滤镜，通过 SVG 矩阵滤镜实现色盲矫正：

.canvas-container {
  filter: url('#protanopia-filter');
}

<!-- 页面中添加隐藏的SVG滤镜定义 -->
<svg width="0" height="0" style="display:none">
  <filter id="protanopia-filter">
    <feColorMatrix 
      type="matrix" 
      values="0.567 0.433 0 0 0
              0.558 0.442 0 0 0
              0.242 0.758 1 0 0
              0 0 0 1 0"
    />
  </filter>
</svg>

以上三种方案中，CSS 滤镜方式最简便但依赖浏览器支持；自定义滤镜批量应用或画布级处理则更贴合 Fabric.js 的原生渲染流程。

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