HTML5 Canvas 无原生 colorCurve 滤镜，需手动操作像素实现；通过 getImageData() 获取像素数据，用三个长度为256的查找表（LUT）分别映射R/G/B通道，逐像素查表重算，再用 putImageData() 写回。
HTML5 Canvas 里没有原生的 colorCurve 滤镜
直接在 HTML5 的 或 CSS 中写 filter: color-curve(...) 是无效的——标准里压根没这个函数。所谓“色彩曲线”，实际得靠手动操作像素数据实现，本质是遍历每个像素的 RGBA 值，按自定义映射表（LUT）或数学公式重算输出值。
用 ctx.getImageData() + 查找表（LUT）调曲线最可控
这是最接近 Photoshop 曲线工具的思路：预先定义 R/G/B 通道各自的 256 级输入→输出映射（比如把输入 100 映射为输出 140），再逐像素查表改值。比实时计算快，也方便复用预设。
实操要点：
-
getImageData()取出像素后，data是一维Uint8ClampedArray，每 4 个元素一组对应 R、G、B、A - LUT 必须是长度为 256 的数组，索引 0~255 对应输入亮度，值也是 0~255
- 别忘了处理 alpha 通道：要么保持原样（
data[i+3] = data[i+3]），要么同步缩放（如去背景时设为 255） - 写回前必须用
putImageData()，且 canvas 尺寸不能动态缩放，否则会模糊或错位
const lutR = new Uint8Array(256); // 预先填好 R 通道映射
const lutG = new Uint8Array(256);
const lutB = new Uint8Array(256);
// ... 填值逻辑，例如 lutR[i] = Math.min(255, i * 1.2)
const imageData = ctx.getImageData(0, 0, width, height);
const { data } = imageData;
for (let i = 0; i < data.length; i += 4) {
data[i] = lutR[data[i]]; // R
data[i+1] = lutG[data[i+1]]; // G
data[i+2] = lutB[data[i+2]]; // B
// data[i+3] 不动，保留 alpha
}
ctx.putImageData(imageData, 0, 0);Canvas 2D 上用 ctx.filter 只支持有限 CSS 滤镜
Chrome/Firefox 支持 ctx.filter = "brightness(1.2) contrast(1.1) saturate(1.3)" 这类基础滤镜，但不支持曲线、色相旋转偏移或通道混合。它走的是 CSS Filter 规范子集，和 SVG 的
立即学习“前端免费学习笔记（深入）”；
常见误区：
- 写
ctx.filter = "custom(url(#curve))"—— Canvas 2D 不解析 SVG 滤镜引用 - 以为
filter能链式叠加复杂效果——实际多个 filter 值会覆盖，不是累加 - 在高清屏上忽略 devicePixelRatio 导致图像模糊——
getImageData()拿到的是物理像素，但 canvas 的 CSS 尺寸可能被缩放
真要交互式调曲线？得靠 WebGL 或第三方库
Canvas 2D 做实时拖拽节点调曲线（像 Photopea 那样）性能扛不住，尤其大图。可行路径只有两条：
- 用
WebGL写 fragment shader，在 GPU 上跑 per-pixel 曲线计算（例如用texture2D查 1D LUT 纹理） - 引入轻量库如
piexl或filters.js，它们封装了 LUT 应用和 UI 控件，但要注意 license 和包体积 - 如果只是静态效果，导出 PNG 后用 ImageMagick 批量跑
convert -function Polynomial更稳
真正难的不是写算法，而是让曲线编辑器生成的控制点，能无损转成 256 级查表——插值方式（线性/样条）、边界处理（clamp/reflect）、是否 gamma 校正，都会明显影响最终观感。
