网页端动态图像去雾需基于大气散射模型与暗通道先验，通过canvas像素操作估算透射率和大气光，结合降采样、web worker、导向滤波及细节保护实现轻量实时处理。
网页端动态图像去雾不能靠简单调对比度或加滤镜，得从像素数据入手做物理建模——核心是用Canvas读取原始图像，结合大气散射模型估算透射率与大气光值，再逐像素反推清晰场景辐射。实时去雾的关键在于算法轻量化与计算分流，否则页面会卡顿。
基于暗通道先验的快速去雾流程
何恺明提出的暗通道先验（Dark Channel Prior）是目前最实用的单图去雾基础。它假设在非天空区域，至少有一个颜色通道的局部最小值趋近于0。利用这点可高效估算大气光和粗略透射率：
- 先对原图做灰度化，再用滑动窗口（如15×15）求每个像素邻域内RGB三通道的最小值，得到“暗通道图”
- 取暗通道图中亮度最高的前0.1%像素，对应原图位置的RGB均值得到全局大气光A（通常接近[230,230,230]）
- 用软抠图（Soft Matting）或导向滤波优化初始透射率t，避免块效应；若追求实时性，可用快速双边网格（Fast Bilateral Grid）替代
- 最终恢复公式为：I′(x) = (I(x) − A) / max(t(x), t₀) + A，其中t₀设为0.1防止除零与过增强
Canvas像素操作与性能优化要点
直接在主线程遍历数百万像素做除法与最大值判断必然卡顿，必须分层处理：
- 降采样先行：将高清图缩放到1/2～1/4尺寸（如1920×1080 → 960×540）再计算暗通道和透射率，结果上采样后仍保持结构连续
- Web Worker执行核心计算：把ImageData.data ArrayBuffer传入Worker，只做整数运算（如位移代替除法）、查表替代浮点幂次，返回修正后的像素数组
- 复用缓冲区：预分配inputBuf/outputBuf两个ImageData对象，在Worker中循环交换使用，避免频繁GC
- 节流更新：监听视频帧或滚动事件时，加入300ms防抖，仅处理最新一帧，不堆积任务
适配动态内容与边缘细节保护
纯算法输出容易让天空过曝、文字边缘发虚，需针对性补偿：
- 天空区域检测：统计暗通道图顶部1/4区域的均值，若高于阈值（如80），则对该区域透射率强制提升20%，抑制白化
- 边缘保留：在导向滤波阶段引入梯度权重，对高梯度区域（如文字、窗框）降低滤波强度，维持锐度
- Alpha通道同步处理：若输入含透明度（如PNG），大气光A需按alpha加权计算，且恢复公式中A也要参与alpha混合，否则边缘出现灰边
- 移动端DPR适配：获取window.devicePixelRatio，按比例放大canvas物理尺寸并scale上下文，确保输出清晰不模糊
去雾不是越彻底越好——保留适度雾感更自然，建议透射率下限t₀控制在0.08～0.15之间，大气光A上限不超过245。算法本身不复杂，但参数微调和边界处理决定最终观感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
