HTML5 Canvas 无法直接实现真实折痕旧化效果，因其缺乏空间变形与条件像素计算能力；需通过 getImageData 手动处理明暗、位移、噪声等多步模拟，或用 SVG 滤镜实现简化版泛黄颗粒效果，真正几何折痕须依赖 WebGL 或离线预渲染。
HTML5 Canvas 里没法直接调用“折痕旧化滤镜”
Canvas 本身没有内置的 crease 或 vintage-fold 滤镜。所谓“折痕旧化”，是多个图像处理步骤叠加的结果：噪声、局部明暗压暗、边缘撕裂感模拟、色偏 + 颗粒。浏览器原生滤镜（filter: url(#svg-filter)）也只支持基础高斯模糊、亮度对比度等，不支持空间变形或条件像素计算。
用 getImageData + putImageData 手动加折痕
核心思路是：在像素层面，按预设折痕路径（比如从左上到右下的一条斜线），对沿线附近区域做非对称明暗调整 + 微位移模拟纸张弯折。关键点：
-
折痕中心线用参数方程定义（如y = x + offset），再算每个像素到该线的距离d - 距离
d 的像素：乘一个0.6 ~ 0.9的衰减系数（模拟阴影），d 的再叠加+1px偏移（用双线性采样近似，避免硬边） - 别忘了加
noise：对所有像素的 RGB 各通道加Math.random() * 10 - 5的扰动，再 clamp 到0–255 - 性能敏感：只处理一次，缓存成新
ImageBitmap，别每帧重算
用 SVG
如果只要“泛黄+颗粒+微模糊”的旧照片感，SVG 滤镜更轻量且可 CSS 复用：
然后在 HTML 中：
feTurbulence 的颗粒感较弱，要明显得调高 baseFrequency，但会失真；feColorMatrix 的 0.02 色偏值是泛黄关键，调太大变褐色，太小看不出效果。
立即学习“前端免费学习笔记（深入）”；
真正像纸张折痕？得用 WebGL 或离线预渲染
Canvas 像素操作无法实现“沿折线两侧反向弯曲”的几何变形——那需要顶点位移和透视投影。可行但成本高的方案：
- 用
regl或原生 WebGL，把图片当纹理，写一个带折痕函数的 fragment shader：输入uv，按折痕法线方向做sign(dot(uv, normal))分区，一侧加阴影，另一侧加高光 + 微缩放 - 更实际的做法：用 Python（PIL/OpenCV）或 Photopea 批量生成带折痕的 PNG 序列，前端只负责切换/淡入，避开实时计算
- 容易被忽略的细节：真实纸张折痕有厚度，纯二维像素操作永远缺那一层“Z 轴挤压感”；若必须动态，建议限制折痕角度（只允许 45°/90°/135°），用查表法加速
