Canvas实现图片滤镜效果教程

本文手把手教你如何用原生JavaScript和HTML5 Canvas实现图片滤镜效果，无需任何第三方库——通过 getImageData 获取像素数据、遍历修改RGB值（如加权灰度转换、255取反实现负片、亮度偏移与边界钳制），再用 putImageData 实时渲染，轻松搞定灰度、反色、亮度调整等常用滤镜；同时贴心提醒性能优化技巧（如使用离屏Canvas处理大图）和关键避坑点（跨域CORS限制），让前端开发者既能深入理解图像处理本质，又能快速落地实用功能。

在网页开发中，使用 JavaScript 结合 HTML5 的 Canvas 可以为图片添加各种简单的滤镜效果。这种方法无需依赖第三方库，直接操作像素即可实现灰度、反色、亮度调整等常见效果。

基本原理：Canvas 与图像像素操作

要实现图片滤镜，首先需要将图片绘制到 canvas 元素上，然后通过 getImageData() 获取像素数据。图像数据以一维数组形式存储，每四个元素分别代表一个像素的红（R）、绿（G）、蓝（B）、透明度（A）值，范围是 0–255。

修改这些值后，用 putImageData() 将处理后的数据重新绘制回 canvas，即可看到滤镜效果。

实现步骤

以下是实现滤镜的基本流程：

• 创建一个 元素并获取其上下文
• 加载图片并绘制到 canvas 上
• 调用 ctx.getImageData(0, 0, width, height) 获取像素信息
• 遍历像素数组，按规则修改 RGB 值
• 使用 ctx.putImageData() 更新图像

常见滤镜示例

将彩色图像转为黑白。常用方法是取 RGB 的加权平均值（考虑人眼对不同颜色的敏感度）：

function applyGrayscale(ctx, width, height) {
  const imageData = ctx.getImageData(0, 0, width, height);
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    const gray = 0.3 * data[i] + 0.59 * data[i + 1] + 0.11 * data[i + 2];
    data[i]     = gray; // R
    data[i + 1] = gray; // G
    data[i + 2] = gray; // B
  }
  ctx.putImageData(imageData, 0, 0);
}

2. 反色滤镜（负片）

将每个颜色通道取反：

function applyInvert(ctx, width, height) {
  const imageData = ctx.getImageData(0, 0, width, 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);
}

3. 亮度调整

增加或减少所有像素的亮度值：

function adjustBrightness(ctx, width, height, value) {
  const imageData = ctx.getImageData(0, 0, width, height);
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    data[i]     = clamp(data[i] + value);
    data[i + 1] = clamp(data[i + 1] + value);
    data[i + 2] = clamp(data[i + 2] + value);
  }
  ctx.putImageData(imageData, 0, 0);
}
<p>// 确保颜色值在 0–255 范围内
function clamp(value) {
return Math.max(0, Math.min(255, value));
}</p>

注意事项

直接操作像素计算量较大，尤其是大图。建议在小尺寸图像或离屏 canvas 中处理以提升性能。同时注意跨域问题：如果图片来自不同源且未开启 CORS，调用 getImageData 会触发安全错误。

基本上就这些，不复杂但容易忽略细节。掌握基础后可以尝试模糊、锐化等更复杂的滤镜。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Canvas实现图片滤镜效果教程》文章吧，也可关注golang学习网公众号了解相关技术文章。