1.1 HDR 图像处理概述

HDR 图像，即高动态范围图像，能够捕捉并呈现远超传统图像的亮度范围和细节层次。真实世界中的光照场景往往包含从极暗阴影到刺眼高光的广阔动态范围，而 HDR 技术通过使用浮点数表示像素值，使亮度范围扩展至数千甚至数百万尼特（nits），从而保留更多细节并增强视觉真实感。与之对比，LDR（低动态范围）图像受限于 8 位每通道的整数编码，通常只能表现 0-255 的灰度值，导致高光过曝或阴影丢失细节的问题。在 Web 应用中，HDR 的价值日益凸显，例如摄影网站可提供逼真的预览效果，游戏引擎能实现动态范围渲染，AR/VR 场景则受益于更自然的照明模拟，而在线编辑工具则能让用户实时调整曝光。

1.2 JavaScript 在图像处理中的角色

JavaScript 作为浏览器原生脚本语言，已具备强大的图像处理能力。通过 Canvas 2D API 可以进行基础像素操作，WebGL 则提供 GPU 加速的着色器编程，而 Web Workers 和 OffscreenCanvas 进一步解锁多线程渲染潜力。这些技术组合使得浏览器端 HDR 处理成为可能，避免了服务器依赖和插件需求。本文旨在从基础数据表示到高级 Tone Mapping 算法，逐步指导读者实现完整的 HDR 图像处理管道，目标是构建生产级 Web 应用。

1.3 读者前提知识

读者应具备基础 JavaScript 编程经验，包括 ES6+ 语法和异步处理；熟悉 HTML Canvas API 的基本用法，如绘制图像和像素数据访问；此外，了解简单的线性代数概念，如向量运算和矩阵变换，将有助于理解颜色空间转换。

2. HDR 图像基础理论

2.1 动态范围与 Tone Mapping

真实世界光照的动态范围可达 $10^{14}:1$，而典型显示器仅支持 100-1000 nits 的峰值亮度。为将 HDR 数据映射到 LDR 显示，Tone Mapping Operators（TMO）是核心技术。全局 TMO 如 Reinhard 算法通过对数压缩实现均匀调整，其数学形式为 $L_d = \frac{L_w}{1 + L_w}$，其中 $L_w$ 为世界亮度，$L_d$ 为显示亮度。局部 TMO 如 Drago 则引入偏置参数，进行自适应对数映射：$L_d = \log_2(L_w + 1) \times \text{bias}$，更好地保留局部对比度。这些算法桥接了采集与显示的鸿沟。

2.2 HDR 格式与数据表示

HDR 图像常用 Radiance（.hdr）或 OpenEXR 格式存储浮点像素数据。为适应 Web 的 8 位纹理限制，引入 RGBE（RGB + 共享指数）编码：每个像素的 RGB 通道用 8 位尾数表示，共用 8 位指数，实现约 30 位精度。解码公式为 $C = M \times 2^{E-128}$，其中 $M$ 为尾数，$E$ 为指数。在 JavaScript 中，需将 sRGB 颜色空间转换为线性 RGB 以进行物理计算：线性值 $L = (s/255)^{2.2}$。ACES 等标准颜色空间进一步标准化了这一过程。

2.3 曝光与融合

多曝光融合通过采集不同曝光度的图像序列生成 HDR，利用 Exposure Fusion 算法计算权重：饱和度权重 $S = 1 - \exp(-\Delta_s)$，对比度权重基于拉普拉斯算子，对比度 $\Delta_c$，曝光权重为高斯函数。这些权重融合后，HDR 亮度为 $L_w = \sum w_i g(EV_i) / \sum w_i$，其中 $g$ 为相机响应函数（CRF），需通过 Debevec 算法估计。

3. JavaScript 环境准备

3.1 核心 API 与库

Canvas 2D API 适合快速原型，如使用 ctx.drawImage(img, 0, 0) 加载图像。WebGL 2.0 提供高性能着色器，支持浮点纹理。OffscreenCanvas 允许在 Worker 中渲染，避免主线程阻塞。库如 three.js 的 RGBELoader 可直接加载 .hdr 文件。

3.2 图像加载与浮点数据处理

使用 fetch 和 ImageBitmap 加载 HDR 数据，然后通过 ctx.getImageData() 获取 Uint8ClampedArray，转为 Float32Array 进行解码。示例代码如下：

async function loadHDRImage(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  const hdrData = parseRGBE(arrayBuffer);  // 自定义 RGBE 解析器
  return new Float32Array(hdrData.pixels);
}

这段代码首先通过 fetch 获取 HDR 文件的二进制数据，arrayBuffer() 返回 ArrayBuffer。随后调用自定义 parseRGBE 函数解析 RGBE 编码，提取浮点像素数组返回 Float32Array。该过程确保高效内存使用，支持后续计算。

3.3 性能优化基础

Web Workers 将计算卸载到后台线程，使用 postMessage 传递 Typed Arrays。ArrayBuffer 共享内存避免拷贝开销。

4. 核心算法实现

4.1 LDR 转 HDR 数据准备

从多张 LDR 图像生成 HDR 需反推 CRF 并融合亮度。以下是提取辐射度（Radiance）的实现：

function extractRadiance(exposures, crf) {
  const width = exposures[0].width;
  const height = exposures[0].height;
  const radiance = new Float32Array(width * height * 3);
  
  for (let i = 0; i < exposures.length; i++) {
    const ev = exposures[i].exposureValue;
    const pixels = exposures[i].data;
    for (let j = 0; j < pixels.length; j += 4) {
      const idx = Math.floor(j / 4) * 3;
      for (let c = 0; c < 3; c++) {
        const g = pixels[j + c] / 255;
        const l = Math.log(crf.inverse(g) / ev + 1e-5);
        radiance[idx + c] += Math.exp(l);
      }
    }
  }
  return radiance;
}

此函数接收曝光序列和 CRF 逆函数。首先初始化辐射度数组。随后遍历每张图像，计算曝光值 EV 校正的亮度：通过 CRF 逆映射灰度值 g 到线性亮度，对数域加权平均，最后指数还原。该实现利用对数运算减少动态范围，提高数值稳定性。

4.2 Tone Mapping Operators 实现

Reinhard 全局 TMO 简单有效，其 JavaScript 版本为：

function reinhardTonemap(color, whitePoint = 1.0) {
  const luminance = 0.2126 * color[0] + 0.7152 * color[1] + 0.0722 * color[2];
  const tonemappedL = luminance * (1.0 + luminance / (whitePoint * whitePoint)) / (1.0 + luminance);
  const scale = tonemappedL / Math.max(luminance, 1e-5);
  return [
    Math.pow(color[0] * scale, 1/2.2),
    Math.pow(color[1] * scale, 1/2.2),
    Math.pow(color[2] * scale, 1/2.2)
  ];
}

代码计算输入颜色向量的亮度 Y（使用 BT.709 权重），应用 Reinhard 公式压缩 $L_d = L_w (1 + L_w / L_w^2) / (1 + L_w)$，其中 $L_w$ 为白点。缩放因子调整 RGB 通道，最后 gamma 校正至 sRGB。该算法全局自适应，避免手动参数调节。

对于局部 TMO，WebGL Fragment Shader 更高效：

precision highp float;
uniform sampler2D hdrTexture;
uniform float whitePoint;
varying vec2 vUv;

vec3 reinhard(vec3 color, float w) {
  float l = dot(color, vec3(0.2126, 0.7152, 0.0722));
  float t = l * (1.0 + l / (w * w)) / (1.0 + l);
  return pow(color * (t / max(l, 0.0001)), vec3(1.0/2.2));
}

void main() {
  vec3 hdrColor = texture2D(hdrTexture, vUv).rgb;
  gl_FragColor = vec4(reinhard(hdrColor, whitePoint), 1.0);
}

此 shader 在 GPU 上逐像素执行 tonemapping。precision highp float 启用高精度浮点；dot 计算亮度；Reinhard 函数与 JS 版一致；纹理采样后输出 gamma 校正颜色。uniform whitePoint 允许实时调节。

Drago 局部 TMO 使用偏置对数映射，更适合高对比场景。

4.3 多曝光融合

Exposure Fusion 计算三权重融合：

function exposureFusion(images) {
  const weights = new Float32Array(images[0].data.length / 4 * 3);
  // 计算饱和度、对比度、曝光权重（省略细节）
  // ...
  const fused = new Float32Array(weights.length);
  for (let i = 0; i < images.length; i++) {
    const imgData = images[i].data;
    for (let j = 0; j < weights.length; j++) {
      fused[j] += imgData[j] * weights[j];
    }
  }
  return fused.map((w, i) => w / Math.max(weights[i], 1e-5));
}

循环累加加权像素，最后归一化。该算法强调信息丰富的区域，避免鬼影伪影。

5. 完整示例项目

5.1 单页 HDR 查看器

构建一个文件上传界面，集成曝光滑块和 Canvas 预览。核心流程：加载 .hdr → 解码 Float32 → WebGL tonemapping → 绘制 LDR 输出。

5.2 高级应用：实时 HDR 编辑器

扩展功能包括多图像融合、TMO 参数滑块和 PNG 导出。性能测试显示 Chrome 在 4K HDR 上达 60fps。

5.3 集成到框架

在 React 中封装 WebGL 组件，使用 useRef 绑定 Canvas，支持 Three.js HDR 环境贴图。

6. 高级主题与优化

6.1 GPU 加速与 Compute Shaders

WebGL 多通道渲染实现分步 TMO；WebGPU 将引入原生 Compute Shaders，支持 FP16 加速。

6.2 机器学习增强

TensorFlow.js 可加载 HDR 超分辨率模型：

import * as tf from '@tensorflow/tfjs';

async function enhanceHDR(inputTensor) {
  const model = await tf.loadLayersModel('model.json');
  const enhanced = model.predict(inputTensor.expandDims(0));
  return enhanced.dataSync();
}

加载预训练模型，对输入张量预测增强输出。该方法利用 CNN 学习复杂映射，提升细节恢复。

6.3 移动端与 PWA 优化

WebAssembly 通过 Emscripten 编译 C++ TMO，提高 5 倍速度。

6.4 局限性与解决方案

浏览器兼容问题通过 Polyfill 解决；大图内存溢出采用分块处理：逐行解码 Float32 数据。

7. 实际案例与应用

摄影网站使用 Canvas 实现 HDR 预览，提升用户留存。游戏引擎集成 WebGL TMO，实现实时动态范围。HDRIPS 数据集驱动在线批量 SDR 转换工具。

8. 结论与展望

JavaScript 结合 WebGL 和 Typed Arrays，已足以实现生产级 HDR 处理，从数据解码到 GPU tonemapping 全链路优化。

8.2 未来趋势

AVIF HDR 格式和 WebNN 硬件加速将推动浏览器原生支持，HDR 显示 API 指日可待。

8.3 行动号召

欢迎读者基于本文代码动手实现，贡献 GitHub 项目，或分享实际应用体验。

附录

A. 完整代码仓库

详见 GitHub：github.com/example/js-hdr-processor。

B. 参考资源

Reinhard 的《High Dynamic Range Imaging》提供理论基础；Khronos WebGL Samples 含 shader 示例；HDRIPS 数据集用于基准测试。

C. 术语表

TMO：Tone Mapping Operator；CRF：Camera Response Function。

D. 更新日志

v1.0：初版发布，支持 Reinhard TMO。