使用JavaScript和Canvas可实现图片滤镜，通过getImageData获取像素数据并修改RGB值，再用putImageData渲染；常见滤镜包括灰度、反色和亮度调整，需注意性能与跨域问题。
在网页开发中，使用 JavaScript 结合 HTML5 的 Canvas 可以为图片添加各种简单的滤镜效果。这种方法无需依赖第三方库，直接操作像素即可实现灰度、反色、亮度调整等常见效果。
基本原理：Canvas 与图像像素操作
要实现图片滤镜，首先需要将图片绘制到 canvas 元素上，然后通过 getImageData() 获取像素数据。图像数据以一维数组形式存储，每四个元素分别代表一个像素的红（R）、绿（G）、蓝（B）、透明度（A）值，范围是 0–255。
修改这些值后，用 putImageData() 将处理后的数据重新绘制回 canvas，即可看到滤镜效果。
实现步骤
以下是实现滤镜的基本流程：
立即学习“Java免费学习笔记（深入）”；
- 创建一个 元素并获取其上下文
- 加载图片并绘制到 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. 反色滤镜（负片）
将每个颜色通道取反：
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);
}
// 确保颜色值在 0–255 范围内
function clamp(value) {
return Math.max(0, Math.min(255, value));
}
注意事项
直接操作像素计算量较大，尤其是大图。建议在小尺寸图像或离屏 canvas 中处理以提升性能。同时注意跨域问题：如果图片来自不同源且未开启 CORS，调用 getImageData 会触发安全错误。
基本上就这些，不复杂但容易忽略细节。掌握基础后可以尝试模糊、锐化等更复杂的滤镜。
