7种降采样算法一站式交互对比,附在线演示
做了一个纯前端的降采样算法交互演示页面,把七种常见算法放在一起、用同一份数据实时对比,方便直观感受每种算法的取舍。
七种算法覆盖
页面内置七种降采样算法,从最简单的等间隔到自适应精度,覆盖了实际工程中常见的策略:
| 算法 | 一句话 |
|---|---|
| 直接抽样 | 等间隔取点,O(1) 决策,最快但也最容易丢特征 |
| 均值降采样 | 分桶取平均,自带抗混叠效果,但会削平尖峰 |
| 中位数降采样 | 分桶取中位数,对异常尖峰免疫 |
| Min-Max | 每桶保留最大+最小值,包络带可视化 |
| LTTB | 最大三角形三桶法,视觉保真度最优 |
| 分段线性 | 分段做线性回归逼近,适合趋势分析 |
| RDP | Ramer–Douglas–Peucker,按容差自适应:平坦区域少留点,波动区域多留点 |
除了 RDP 是按精度(容差 ε)控制输出,其余六种都是固定目标点数。两种范式放在一起对比,降采样的取舍一目了然。
低通滤波抗混叠
页面提供了一个可选的低通滤波器(滑动窗口平均),在降采样之前对原始信号做预处理。
开/关滤波、调窗口大小都是实时生效,可以直观看到:哪些算法本身就抗混叠(均值),哪些算法需要前置滤波配合(直接抽样),以及 Min-Max 和 LTTB 在滤波前后的包络变化。
五种内置信号
预置了五组不同特征的测试信号,比单一正弦波更能暴露算法的差异:
- 复合正弦波 + 噪声:多频叠加,考验抗混叠和噪声抑制
- 阶跃信号:测试对突变边缘的保留能力
- 尖峰脉冲:对比均值和 Median 对离群点的处理
- 模拟心电:类真实场景,LTTB 和 Min-Max 表现有参考价值
- 随机游走:无周期结构,只靠统计特征降采样
技术实现
单 HTML 文件,零构建、零依赖。Canvas 绑制双图对比,左侧控制面板右侧实时渲染,自适应 DPR 保证 Retina 屏清晰。