7种降采样算法一站式交互对比,附在线演示

做了一个纯前端的降采样算法交互演示页面,把七种常见算法放在一起、用同一份数据实时对比,方便直观感受每种算法的取舍。

🌐 在线体验 · 📂 GitHub 仓库

七种算法覆盖

页面内置七种降采样算法,从最简单的等间隔到自适应精度,覆盖了实际工程中常见的策略:

算法 一句话
直接抽样 等间隔取点,O(1) 决策,最快但也最容易丢特征
均值降采样 分桶取平均,自带抗混叠效果,但会削平尖峰
中位数降采样 分桶取中位数,对异常尖峰免疫
Min-Max 每桶保留最大+最小值,包络带可视化
LTTB 最大三角形三桶法,视觉保真度最优
分段线性 分段做线性回归逼近,适合趋势分析
RDP Ramer–Douglas–Peucker,按容差自适应:平坦区域少留点,波动区域多留点

除了 RDP 是按精度(容差 ε)控制输出,其余六种都是固定目标点数。两种范式放在一起对比,降采样的取舍一目了然。

低通滤波抗混叠

页面提供了一个可选的低通滤波器(滑动窗口平均),在降采样之前对原始信号做预处理。

开/关滤波、调窗口大小都是实时生效,可以直观看到:哪些算法本身就抗混叠(均值),哪些算法需要前置滤波配合(直接抽样),以及 Min-Max 和 LTTB 在滤波前后的包络变化。

五种内置信号

预置了五组不同特征的测试信号,比单一正弦波更能暴露算法的差异:

技术实现

单 HTML 文件,零构建、零依赖。Canvas 绑制双图对比,左侧控制面板右侧实时渲染,自适应 DPR 保证 Retina 屏清晰。

🌐 在线体验 · 📂 GitHub 仓库