Filters 滤镜效果

滤镜用于对元素应用各种视觉效果，如模糊、亮度调整、色彩变换等。

字段定义

interface Filter {
  type: FilterType;   // 滤镜类型
  value: number;      // 滤镜值
}

type FilterType =
  | 'blur'        // 模糊
  | 'brightness'  // 亮度
  | 'contrast'    // 对比度
  | 'saturate'    // 饱和度
  | 'hue'         // 色相旋转
  | 'grayscale'   // 灰度
  | 'sepia'       // 复古
  | 'invert';     // 反色

滤镜类型

blur 模糊

值	效果
0	无模糊
5	轻微模糊
10	中度模糊
20+	强烈模糊

{
  "style": {
    "filters": [
      { "type": "blur", "value": 10 }
    ]
  }
}

示例：背景虚化

{
  "type": "image",
  "src": "background.jpg",
  "style": {
    "filters": [
      { "type": "blur", "value": 15 }
    ]
  }
}

brightness 亮度

值	效果
0	全黑
0.5	变暗
1	正常
1.5	变亮
2+	非常亮

{
  "style": {
    "filters": [
      { "type": "brightness", "value": 1.3 }
    ]
  }
}

contrast 对比度

值	效果
0	灰色
0.5	低对比度
1	正常
1.5	高对比度
2+	极高对比度

saturate 饱和度

值	效果
0	无色彩（灰度）
0.5	低饱和度
1	正常
1.5	高饱和度
2+	超高饱和度

hue 色相旋转

值	效果
0	原色
90	色相旋转 90°
180	色相旋转 180°
270	色相旋转 270°
360	回到原色

grayscale 灰度

值	效果
0	原色
0.5	半灰度
1	完全灰度

sepia 复古

值	效果
0	原色
0.5	轻微复古
1	完全复古

invert 反色

值	效果
0	原色
0.5	灰色
1	完全反色

滤镜组合

多个滤镜可以组合使用，按顺序依次应用。

高对比度鲜艳

{
  "filters": [
    { "type": "contrast", "value": 1.3 },
    { "type": "saturate", "value": 1.4 }
  ]
}

柔和效果

{
  "filters": [
    { "type": "brightness", "value": 1.1 },
    { "type": "contrast", "value": 0.9 },
    { "type": "saturate", "value": 0.8 }
  ]
}

戏剧效果

{
  "filters": [
    { "type": "contrast", "value": 1.5 },
    { "type": "brightness", "value": 0.9 },
    { "type": "saturate", "value": 1.2 }
  ]
}

复古电影

{
  "filters": [
    { "type": "sepia", "value": 0.3 },
    { "type": "contrast", "value": 1.1 },
    { "type": "brightness", "value": 0.95 }
  ]
}

冷色调

{
  "filters": [
    { "type": "hue", "value": 200 },
    { "type": "saturate", "value": 0.8 }
  ]
}

暖色调

{
  "filters": [
    { "type": "hue", "value": 30 },
    { "type": "saturate", "value": 1.1 }
  ]
}

完整示例

毛玻璃背景

{
  "type": "image",
  "src": "background.jpg",
  "transform": { "width": "100%", "height": "100%" },
  "style": {
    "filters": [
      { "type": "blur", "value": 20 },
      { "type": "brightness", "value": 0.8 }
    ]
  }
}

Instagram 风格滤镜

Clarendon 风格：

{
  "filters": [
    { "type": "contrast", "value": 1.2 },
    { "type": "brightness", "value": 1.1 },
    { "type": "saturate", "value": 1.3 }
  ]
}

Moon 风格：

{
  "filters": [
    { "type": "grayscale", "value": 1 },
    { "type": "contrast", "value": 1.1 },
    { "type": "brightness", "value": 1.1 }
  ]
}

字段说明表

类型	值范围	单位	默认值
blur	0-100	像素	0
brightness	0-2	倍数	1
contrast	0-2	倍数	1
saturate	0-2	倍数	1
hue	0-360	度	0
grayscale	0-1	比例	0
sepia	0-1	比例	0
invert	0-1	比例	0

最佳实践

滤镜数量：建议不超过 3-4 个，过多会影响性能
值的选择：避免极端值，通常在 0.8-1.5 范围内效果最佳
组合顺序：滤镜按顺序应用，不同顺序可能产生不同效果
性能考虑：blur 滤镜计算量大，谨慎使用高值
预览测试：建议先预览效果再应用到最终视频

Filters 滤镜效果

On this page