Canvas像素级操作的核心是getImageData和putImageData方法，前者获取指定区域RGBA像素数据并返回ImageData对象，后者将修改后的像素数据写回画布；二者支持脏区更新以提升性能，是实现滤镜、图像分析等前端图像处理的基础。
Canvas 像素级操作的核心就是 getImageData 和 putImageData 这一对方法。它们不依赖任何第三方库，直接暴露图像底层的 RGBA 数据，让你能真正“看见并修改每一个像素”。掌握它们，是实现滤镜、图像分析、实时视频处理等能力的基础。
getImageData：拿到原始像素的“快照”
调用 context.getImageData(x, y, width, height) 会从画布指定区域拷贝一份像素数据，返回一个 ImageData 对象。这个对象本身不可直接读写像素，关键在它的 .data 属性——一个 Uint8ClampedArray 类型的一维数组，按 RGBA 顺序排列，每个值范围是 0–255。
例如，一个宽 100、高 100 的区域，共 10000 个像素，.data 数组长度就是 40000（10000 × 4）。第 i 个像素（从 0 开始计数）对应：
- 红通道：
data[4 * i + 0] - 绿通道：
data[4 * i + 1] - 蓝通道：
data[4 * i + 2] - 透明度：
data[4 * i + 3]
注意：坐标 (x, y) 是矩形区域左上角，不是画布原点；该方法不受 canvas 当前 transform 影响，始终基于原始像素坐标。
putImageData：把改好的像素“刷回去”
context.putImageData(imageData, dx, dy) 将修改后的 ImageData 写回画布，左上角对齐到 (dx, dy)。更精细的控制可通过可选参数指定“脏区”：
putImageData(imgData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)- 只重绘
imgData中从(dirtyX, dirtyY)开始、宽高为dirtyWidth × dirtyHeight的子区域 - 实际绘制位置仍是
(dx + dirtyX, dy + dirtyY)，而非(dx, dy)整体偏移
这个“脏区”机制对性能很关键——比如只处理图像中心一块区域时，不必整图重绘，能显著减少渲染开销。
典型像素操作流程与常见陷阱
完整流程就三步：绘制源图像 → 获取像素 → 修改数组 → 写回画布。但实操中容易踩坑：
- 跨域图片需设置
img.crossOrigin = "anonymous"，否则getImageData抛安全错误 -
ImageData.data是只读视图，必须通过索引赋值，不能整体替换数组 - 修改后必须调用
putImageData，Canvas 不会自动同步内存数据 - 灰度转换常用公式：
gray = 0.299 * r + 0.587 * g + 0.114 * b，再将 r/g/b 都设为 gray 值 - 反色只需对每个通道做
255 - value，alpha 通常保持不变
为什么适合前端图像处理
整个过程完全在浏览器内存中完成，无需上传服务器或请求后端接口。用户上传一张图，点击“黑白”按钮，JS 瞬间遍历几万个像素完成计算并刷新画面——延迟几乎不可感知。尤其在鸿蒙、小程序等轻量环境中，这种纯客户端方案既高效又可控。滤镜切换、实时美颜、证件照背景替换，底层逻辑都离不开这对方法。
