HTML5 Canvas图像灰度化与高对比度调整需先用getImageData获取像素数据，按YUV公式gray=0.299R+0.587G+0.114B计算灰度并赋值RGB分量；再通过(newVal=(val−128)×contrast+128)调整对比度并裁剪至[0,255]。
HTML5 Canvas 实现图像灰度化与高对比度调整，核心是通过 getImageData 获取像素数据，逐点修改 RGBA 值，再用 putImageData 写回画布。两者可独立使用，也可串联处理（先灰度、再提对比）。
灰度化：用加权公式替代简单平均
人眼对绿色最敏感、红色次之、蓝色最弱，因此标准灰度转换不取 (R+G+B)/3，而采用 YUV 亮度公式：
- gray = 0.299 × R + 0.587 × G + 0.114 × B
- 计算结果需四舍五入为整数（
Math.round()或|0），因像素值必须是 0–255 的整数 - 将该 gray 值同时赋给 R、G、B 三个分量；A（alpha）保持不变，避免影响透明度
- 遍历时步长为 4，跳过 alpha 但保留其位置：索引
i对应 R，i+1是 G，i+2是 B，i+3是 A
高对比度调整：基于亮度偏移与裁剪
高对比不是简单拉伸 RGB，而是围绕灰度基准做非线性增强。常用方法是“对比度因子法”：
- 先算出当前像素的加权灰度值
gray（同上） - 设对比度因子
contrast（如 1.3 表示增强 30%，0.7 表示降低） - 对每个通道应用公式：
newVal = (val - 128) * contrast + 128 - 结果需裁剪到 [0, 255] 范围：
Math.min(255, Math.max(0, newVal)) - 注意：该操作适用于已灰度化的图像效果更统一；若作用于彩色图，建议分别对 R/G/B 应用相同逻辑，或先灰度再增强
实际处理流程与关键细节
从加载图像到完成渲染，需按顺序执行以下步骤：
- 确保图像跨域安全：给
crossOrigin="anonymous"（服务器需支持 CORS） - 等
img.onload触发后，再设置 canvas 宽高为img.naturalWidth/Height，并调用ctx.drawImage(img, 0, 0) - 调用
ctx.getImageData(0, 0, width, height)获取像素数据，.data是长度为width × height × 4的Uint8ClampedArray - 循环修改时，推荐用
for (let i = 0; i ，避免越界或漏点 - 处理完所有像素后，立即调用
ctx.putImageData(imageData, 0, 0)渲染——该操作不可逆，且无内置撤销机制
组合使用示例（灰度 + 高对比）
若想先转灰度再提对比，可在同一遍历中完成两步：
- 先算
gray = 0.299*r + 0.587*g + 0.114*b - 再算
enhanced = (gray - 128) * 1.4 + 128 - 将
enhanced赋给data[i]、data[i+1]、data[i+2] - 这样输出的是高对比的单色图像，视觉冲击更强，适合海报、图标或数据可视化场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
