JavaScript如何实现图像处理_Canvas如何操作像素？

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;

写回画布：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）