JavaScript通过Canvas的ImageData对象直接读写像素实现图像处理，核心是用getImageData()获取像素数据，遍历修改Uint8ClampedArray中的RGBA值，再putImageData()写回；需注意同源限制、索引计算、数值截断及性能优化。
JavaScript 通过 Canvas 的 ImageData 对象直接读写像素，是实现图像处理（如灰度化、边缘检测、滤镜）的核心方式。关键在于获取像素数据、按规则修改 RGBA 值，再写回画布。
获取像素数据：getImageData()
使用 ctx.getImageData(x, y, width, height) 获取指定区域的像素快照。返回对象包含三个属性：
- data：一维 Uint8ClampedArray，每 4 个连续元素代表一个像素的 R、G、B、A 值（范围 0–255）
- width 和 height：实际获取区域的尺寸
- 注意：只能读取同源图像，跨域图片需设置
img.crossOrigin = "anonymous"
遍历并修改像素：操作 data 数组
对每个像素，按索引计算位置（i = (y * width + x) * 4），然后修改对应 R/G/B/A 值。例如灰度化常用加权平均：
for (let i = 0; i < imageData.data.length; i += 4) {
const r = imageData.data[i];
const g = imageData.data[i + 1];
const b = imageData.data[i + 2];
const gray = 0.299 * r + 0.587 * g + 0.114 * b;
imageData.data[i] = imageData.data[i + 1] = imageData.data[i + 2] = gray;
}其他效果如反色：imageData.data[i] = 255 - r;；透明度调整：imageData.data[i + 3] = 128;
立即学习“Java免费学习笔记（深入）”；
写回画布：putImageData()
修改完 imageData.data 后，用 ctx.putImageData(imageData, dx, dy) 将结果绘制到画布指定位置。参数 dx/dy 是目标左上角坐标，与 getImageData 的起始点无关。
- 若想原地替换，通常传入相同坐标（如
putImageData(imgData, 0, 0)） - 性能提示：避免在循环中频繁调用 putImageData；批量处理完再写一次
- 注意：putImageData 不受 canvas 当前样式（如 fillStyle）影响，只写入原始像素
实用技巧与注意事项
Canvas 图像处理易忽略但关键的细节：
- 确保图像已加载完成再操作：
img.onload = () => { /* draw & process */ }; - 为提升性能，可缩小画布尺寸处理（如缩略图滤镜），再放大显示
- 复杂算法建议用
OffscreenCanvas（Worker 中运行）避免阻塞主线程 - RGBA 值必须是 0–255 整数；超出范围会被自动截断（如 -10 → 0，300 → 255）
