CSS filter实现基础调色面板的最快方案是组合brightness、contrast、saturate、hue-rotate等函数，按亮度→对比度→饱和度→色相顺序链式书写，注意hue-rotate必须带deg单位，且filter不支持CSS变量需JS动态拼接。
怎么用 CSS filter 实现基础图片调色面板
纯前端做图片调色面板，filter 是最快落地的方案。它支持亮度、对比度、饱和度、色相旋转等常见调整，无需 canvas 或图像解码，直接作用于 img 元素或容器。
常见错误是把多个 filter 值写成空格分隔却漏掉单位（比如 hue-rotate(90) 写成 hue-rotate(90deg) 才有效），或者叠加顺序搞反导致效果异常——filter 是从左到右依次执行的。
-
filter: brightness(1.2) contrast(0.9) saturate(1.5) hue-rotate(15deg);顺序影响最终观感，调色时建议固定顺序：亮度 → 对比度 → 饱和度 → 色相 - 浏览器兼容性没问题，Chrome/Firefox/Safari/Edge 均支持，但 IE 完全不支持
filter - 移动端要注意：iOS Safari 对
hue-rotate()的精度略低，±5deg 可能无明显变化，建议步进设为 10deg
如何用 canvas + getImageData 做像素级调色控制
需要精确控制 RGB 值、实现曲线调整或局部调色时，canvas 是绕不开的路径。核心是读取 getImageData()，遍历 data 数组（每 4 个值为 r,g,b,a），再用 putImageData() 写回。
容易踩的坑是跨域问题：哪怕图片在同域下用相对路径引入，如果通过 img.src = 'xxx.jpg' 动态加载，没加 crossOrigin="anonymous" 就会触发 SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D'。
立即学习“前端免费学习笔记（深入）”；
- 务必给
<img>加上crossOrigin="anonymous"属性，且服务端需返回Access-Control-Allow-Origin: * -
getImageData()返回的是 Uint8ClampedArray，直接改data[i]即可，但别越界（i % 4 === 0是 R，1是 G，2是 B） - 性能敏感：大图（如 2000×1500）遍历 300 万像素会卡顿，建议先缩放到 800px 宽预览，导出时再用原图重算
为什么 hue-rotate 和 CSS 自定义属性（CSS vars）搭配不好使
filter 不接受 CSS 变量作为函数参数，写成 filter: hue-rotate(var(--h)); 会直接失效，浏览器当作无效声明忽略。
解决办法只有两个：一是用 JS 拼接字符串后赋给 style.filter；二是用 filter: url(#myFilter) 配合 SVG filter（支持 CSS var，但复杂度陡增）。
- 推荐 JS 方式：
el.style.filter = `brightness(${b}) contrast(${c}) hue-rotate(${h}deg)`，简单直接 - 避免在循环里频繁设置
style.filter，会引起重排重绘，可先拼好整个 filter 字符串再一次性赋值 - 注意单位：所有数值类 filter 函数（
brightness、contrast、saturate）默认无单位（1 表示原始值），但hue-rotate必须带deg或rad
导出调色后图片时，canvas.toDataURL() 为什么是黑图或模糊图
黑图大概率是跨域未处理（前面提过），模糊图则多因 canvas 尺寸与图片实际尺寸不匹配：若 canvas.width / height 没按图片原始 naturalWidth / naturalHeight 设置，drawImage 会拉伸采样，再 toDataURL 就糊了。
- 正确做法：
canvas.width = img.naturalWidth; canvas.height = img.naturalHeight;，而不是用img.width（可能是 CSS 缩放后的值） - toDataURL 默认输出
image/png，体积大；如需压缩，传第二个参数：canvas.toDataURL('image/jpeg', 0.85) - 注意：
toDataURL在部分安卓 WebView 中对 JPEG 支持不稳定，保险起见可 fallback 到 PNG
