使用Canvas实现简单图片滤镜效果_javascript技巧-js教程-PHP中文网

使用Canvas实现简单图片滤镜效果_javascript技巧

幻影之瞳

发布： 2025-10-31 20:57:01

原创

191人浏览过

使用JavaScript和Canvas可实现图片滤镜，通过getImageData获取像素数据并修改RGB值，再用putImageData渲染；常见滤镜包括灰度、反色和亮度调整，需注意性能与跨域问题。

使用canvas实现简单图片滤镜效果_javascript技巧

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

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

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

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

实现步骤

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

立即学习“Java免费学习笔记（深入）”；

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

常见滤镜示例

1. 灰度滤镜

将彩色图像转为黑白。常用方法是取 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. 反色滤镜（负片）

图酷AI

下载即用！可以免费使用的AI图像处理工具，致力于为用户提供最先进的AI图像处理技术，让图像编辑变得简单高效。

查看详情

将每个颜色通道取反：

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>

登录后复制