如何使用Canvas实现简单的图片滤镜效果

使用Canvas实现简单图片滤镜效果，核心思路是先把图片绘制到画布上，再通过JavaScript读取像素矩阵，对每个像素的颜色值做计算，最后写回画布完成视觉效果的改变。这种方式不依赖任何外部库，适合学习图像处理和前端基础能力。

基本流程说明

实现滤镜通常包含下面几个步骤：

• 在页面中准备一个<canvas>元素和一张源图片
• 将图片绘制到Canvas上下文中
• 调用getImageData获取像素数组
• 遍历数组修改RGBA数值
• 用putImageData把处理后的数据放回画布

代码示例：灰度滤镜

下面给出一个完整的灰度滤镜实现，把彩色图转成黑白图。核心算法是取红绿蓝平均值作为新的灰度值。

// 获取canvas和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 创建图片对象并加载
const img = new Image();
img.src = 'https://ipipp.com/sample.jpg';
img.onload = function() {
  // 设置画布尺寸与图片一致
  canvas.width = img.width;
  canvas.height = img.height;
  // 绘制图片到画布
  ctx.drawImage(img, 0, 0);
  // 获取像素数据
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  // 遍历每个像素，步长为4（RGBA）
  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 = (r + g + b) / 3;
    data[i] = gray;
    data[i + 1] = gray;
    data[i + 2] = gray;
    // data[i + 3]为透明度，保持不变
  }
  // 写回画布
  ctx.putImageData(imageData, 0, 0);
};

反色滤镜示例

反色效果用255减去原色值即可，逻辑与灰度类似。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://ipipp.com/sample.jpg';
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    data[i] = 255 - data[i];         // R反色
    data[i + 1] = 255 - data[i + 1]; // G反色
    data[i + 2] = 255 - data[i + 2]; // B反色
  }
  ctx.putImageData(imageData, 0, 0);
};

注意事项

如果图片来源于不同域且服务器未配置跨域头，调用getImageData会抛出安全错误。此时需要为Image对象设置crossOrigin属性，并确保图片服务允许跨域。另外处理大图时像素遍历可能占用一定主线程时间，可考虑用Web Worker优化。

Canvas滤镜本质是对像素数据的数学运算，理解RGBA结构就能派生出更多效果，比如调整亮度、对比度或简单卷积模糊。

常用滤镜参数对照

小结

通过原生Canvas和JavaScript操作图像像素，能以很小成本实现基础滤镜，是前端图像入门的有效练习路径。

Canvasjavascriptimage_filter修改时间：2026-07-29 12:33:19