canvas像素滤镜实现需先确保图像就绪、尺寸匹配和跨域处理；灰度用加权平均（0.299r+0.587g+0.114b），反转为255-rgb，对比度通过(value-128)×contrast+128线性拉伸。
Canvas像素处理实现灰度、反转和对比度滤镜，核心是获取像素数据→逐像素计算→写回画布。三类滤镜逻辑清晰、改动轻量，适合在主线程实时运行，但要注意图像就绪、尺寸匹配和数值边界。
确保图像已加载且可读取
无论来源是还是
- 图片：监听img.onload事件，绘制前确认自然宽高；画布width/height需设为图片原始尺寸，避免坐标偏移
- 视频：监听loadeddata或canplay，iOS需加muted、autoplay和playsinline属性
- 跨域资源：img.crossOrigin = 'anonymous'，否则读像素会触发SecurityError
灰度滤镜：用加权平均更贴近人眼感知
不是简单(R+G+B)/3，而是按视觉敏感度分配权重，保留明暗层次：
- 对每个像素，取data[i]（R）、data[i+1]（G）、data[i+2]（B）
- 计算gray = (r * 0.299 + g * 0.587 + b * 0.114) | 0（位运算比Math.floor快）
- 将gray同时赋给data[i]、data[i+1]、data[i+2]，data[i+3]（Alpha）保持不变
反转滤镜：RGB通道直接取反
本质是颜色值关于127.5对称，操作极简且无越界风险：
- data[i] = 255 - data[i]（R）
- data[i+1] = 255 - data[i+1]（G）
- data[i+2] = 255 - data[i+2]（B）
- Alpha通道不参与运算，原值保留
对比度滤镜：线性拉伸RGB值
通过公式value = (value - 128) × contrast + 128调整，contrast > 1增强，
- 对每个通道，先中心化：centered = value - 128
- 缩放后还原：adjusted = centered * contrast + 128
- 用Math.min(255, Math.max(0, adjusted))截断，确保落在0–255范围内
- 推荐contrast取值范围0.5–2.0，避免过曝或死黑
