HTML5 Canvas 2D 不支持内置曲线调整，需用 getImageData 获取像素数据并结合预生成的 LUT 查表映射 R/G/B 通道；注意避免边读边写、处理 gamma 校正及禁用图像平滑以保边缘清晰。
HTML5 中没有内置的“曲线调整”API
Canvas 2D 上下文不提供类似 Photoshop 曲线（Curves）的直接调色接口，getImageData + 手动像素遍历是唯一可行路径。所谓“曲线调整”，本质是建立输入亮度（0–255）到输出亮度的映射关系，需自行构造查找表（LUT）。
用 getImageData 逐像素应用曲线映射
核心步骤：读取像素 → 提取 R/G/B 值 → 分别查表映射 → 写回 putImageData。注意不能边读边写，否则会污染后续计算。
- 只操作
data数组的 R/G/B 通道（索引 0/1/2，跳过 alpha 通道 3） - 曲线映射通常基于灰度值，但专业做法是分别处理三通道（尤其需保留色相时）
- 简单灰度曲线可先算
gray = 0.299*r + 0.587*g + 0.114*b，再用该值查 LUT，然后等比缩放 RGB - 性能敏感场景必须用
Uint8ClampedArray直接操作，避免 Math.round 等浮点运算
const lut = new Uint8Array(256); // 预生成曲线查找表
for (let i = 0; i < 256; i++) {
lut[i] = Math.min(255, Math.max(0, i * 1.2 - 20)); // 示例：提亮+压暗高光
}
const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
data[i] = lut[data[i]]; // R
data[i + 1] = lut[data[i + 1]]; // G
data[i + 2] = lut[data[i + 2]]; // B
// alpha 不变
}
ctx.putImageData(imageData, 0, 0);Canvas 2D 的局限：无法直接复用 CSS filter 或 WebGL 效果
filter: brightness()、contrast() 等是全局近似，不支持逐亮度点控制；WebGL 虽可写 fragment shader 实现真曲线，但需额外上下文切换和着色器编译——对简单网页编辑器得不偿失。
- 若只需 S 曲线增强对比，
filter: contrast(1.3) brightness(0.95)更轻量 - 若需用户拖动贝塞尔锚点实时调曲线，必须用
getImageData+ LUT 重绘，且建议节流（如 60ms 最小间隔） - 移动端要注意
getImageData在大图上可能触发内存警告，应限制最大处理尺寸（如 1200px 宽）
容易被忽略的 Gamma 和色彩空间问题
浏览器默认按 sRGB 解释 Canvas 像素，而多数图像编辑软件在 linear RGB 下计算曲线。未经 gamma 校正直接映射，会导致暗部细节丢失、高光发硬。
- 严格做法：读取后转 linear（
val/255→pow(..., 2.2)），曲线计算，再转回 sRGB（pow(..., 1/2.2) * 255） - 但多数 Web 应用选择忽略——因用户上传图本身已含 sRGB 嵌入，且人眼对 gamma 误差不敏感
- 真正影响体验的是：未做
ctx.imageSmoothingEnabled = false导致缩放时插值模糊，让曲线调整后的边缘显得脏
