filter属性本身不能实时响应输入，需通过JavaScript监听range控件的input事件，动态拼接并设置style.filter字符串实现预览；导出时CSS filter无效，须用Canvas或专用库处理。
filter 属性本身不能直接“实时”响应 HTML 编辑器里的输入
浏览器的 filter 是 CSS 属性，它作用于 DOM 元素（比如 <img> 或 <div>），但不会自动监听编辑器控件（如 <input type="range">）的变化。所谓“实时”，本质是：用户拖动滑块 → JavaScript 捕获值 → 动态设置元素的 style.filter。没有中间这层 JS 绑定，filter 就只是静态样式。
用 range 输入框 + style.filter 实现基础实时预览
这是最轻量、兼容性最好（Chrome 53+、Firefox 35+、Safari 9.1+）的做法，适合在富文本编辑器或图片配置面板中嵌入：
- 给图片容器（如
<div id="preview"><img src="..."></div>）预留一个明确的 ID 或 class，方便 JS 获取 - 为每个滤镜参数（如 brightness、contrast、saturate）准备独立的
<input type="range">，并设置合理的min/max/step（例如 brightness：0.1–3.0，step=0.01） - 在
input事件里拼接 filter 字符串，注意顺序影响结果（例如blur(2px) contrast(1.5)和contrast(1.5) blur(2px)渲染不同） - 避免直接写
element.style.filter = "brightness(" + val + ") contrast(" + c + ")"—— 这会覆盖其他 filter 值；应统一维护一个对象，每次重算完整字符串
const img = document.querySelector('#preview img');
const brightnessSlider = document.getElementById('brightness');
brightnessSlider.addEventListener('input', () => {
const b = brightnessSlider.value;
// 所有滤镜参数需在此统一组装
img.style.filter = `brightness(${b}) contrast(${contrastVal}) saturate(${satVal})`;
});
多个滤镜叠加时要注意计算顺序和单位
filter 是函数列表，浏览器按从左到右顺序执行，且部分函数对后续函数有放大/衰减作用（比如先 blur(2px) 再 brightness(2)，和反过来，像素级输出不同）。常见易错点：
-
blur()必须带单位（px或em），写成blur(2)无效，会静默失败 -
hue-rotate()单位是度（deg），不是弧度，hue-rotate(90)等价于hue-rotate(90deg)，但显式写更安全 -
drop-shadow()的 x/y 偏移、模糊半径都需单位，漏掉任一单位会导致整个 filter 失效（浏览器跳过该函数） - 数值超出合理范围不一定报错，但可能无视觉变化（例如
saturate(0)完全去色，saturate(5)已足够浓烈，再往上人眼难分辨）
编辑器集成时别忽略 canvas 导出和性能边界
如果用户最终要导出带滤镜的图片（而非仅预览），filter 样式不会被 canvas.toDataURL() 捕获 —— 它只画原始像素。这时必须用 ctx.filter（Canvas 2D API）或手动图像处理（如通过 getImageData 改 RGBA 值），成本高得多。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS
filter预览快、省资源，适合调试和交互反馈 - 导出需求存在时，要么用
dom-to-image类库（它内部会尝试解析并模拟 filter 效果，但不保证 100% 一致），要么切换到 Canvas 方案 - 在低端设备上，高频触发
input（如快速拖动 range）可能导致 layout thrashing，建议加requestAnimationFrame节流
真正麻烦的从来不是怎么写那行 style.filter，而是想清楚：这个“实时”到底服务于预览，还是导出，抑或两者都要 —— 选错路径，后面全是补丁。
