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，避免过曝或死黑