首先将图像绘制到canvas，通过getImageData获取像素数据，遍历修改RGBA值实现灰度、反色、亮度调节等效果，再用putImageData写回；需注意跨域限制和数组边界处理。
在Web开发中，使用JavaScript结合Canvas进行图像处理是一种常见且强大的技术。特别是对图像的像素级操作，可以实现滤镜、灰度化、边缘检测等效果。本文将介绍如何通过Canvas API读取和修改图像的像素数据，完成基础的图像处理任务。
获取图像像素数据
要对图像进行像素级操作，首先需要将图像绘制到canvas元素上，然后使用getImageData()方法获取像素信息。
步骤如下：
- 创建一个
<canvas></canvas>元素并获取其2D渲染上下文 - 使用
drawImage()将图片绘制到canvas上 - 调用
ctx.getImageData(0, 0, width, height)获取图像像素数据
返回的ImageData对象包含一个data属性，这是一个一维Uint8ClampedArray数组，按RGBA顺序存储每个像素的红、绿、蓝和透明度值（范围0-255）。
立即学习“Java免费学习笔记（深入）”；
修改像素并重新渲染
拿到像素数组后，就可以遍历并修改每个像素的值。处理完成后，使用putImageData()将修改后的数据写回canvas。
示例：将图像转为灰度图
const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data;
<p>for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
// 使用加权平均计算亮度
const gray = 0.299 <em> r + 0.587 </em> g + 0.114 * b;
data[i] = data[i + 1] = data[i + 2] = gray;
}
// 写回canvas
ctx.putImageData(imageData, 0, 0);
这个过程会逐像素计算灰度值，并将RGB三个通道设为相同值，从而实现灰度效果。
常见图像处理操作
基于像素操作，可以实现多种视觉效果：
-
反色：将每个颜色通道值替换为
255 - 原值 - 亮度调节：给每个通道加上或减去一个数值（注意边界检查）
- 透明度调整：修改每组第四个值（alpha通道）
- 边缘检测：使用卷积核扫描像素邻域，计算梯度强度
例如，增加亮度可这样实现：
for (let i = 0; i < data.length; i += 4) {
data[i] = Math.min(255, data[i] + 50); // R
data[i + 1] = Math.min(255, data[i + 1] + 50); // G
data[i + 2] = Math.min(255, data[i + 2] + 50); // B
}
基本上就这些核心操作。掌握getImageData和putImageData是进行像素级图像处理的关键。虽然直接操作数组性能有限，但对于大多数前端图像处理需求已经足够。注意跨域图片可能会触发安全限制，需确保资源可访问。不复杂但容易忽略细节。
